vue中处理多行文本溢出显示省略号解决兼容问题，可以用vue的filters属性限制字数
html部分:
<div>{{item | ellipsis}}</div>
script部分:
filters: {
ellipsis(value) {
if (!value) return "";
if (value.length > 25) {
return value.slice(0, 25) + "...";
}
return value;
}
},
单纯用css控制有些浏览器不兼容,并且限制2行其他行依然显示，所以对高度也有要求。
css部分：
overfllow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
单行溢出显示省略号：
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
网友评论