vue在后端获取到了数据，如何设置超出部分隐藏并用省略号？

Question

我在获取到了后端文字，想往常一样设置了css

html

但是实际效果
我又尝试了把文字内容写死，就有效果了，但是这是数据交互，又不能写死，想问下，这种情况下，如何设置其超出部分隐藏并用省略号来表示？

Answer 1

可以做个hack处理，先隐藏，再添加省略号
#news_content p{

font-size: .16rem;
font-weight: 200;
line-height:.35rem;
height: .7rem;
overflow: hidden;
cursor: pointer;
padding-right: 20px;
position: relative;

}
#news_content p:after{

content:"...";
position: absolute;
right: 16px;
bottom: 0;

}

Answer 2

white-space: nowrap; 
text-overflow: ellipsis;
overflow: hidden;
width: 100px;//要有固定宽

Answer 3

为什么又写双花括号又写v-html?

Answer 4

text-overflow: ellipsis;

详见文档