笔记:vue中filters处理多行文本溢出显示省略号解决兼容问题

vue中处理多行文本溢出显示省略号解决兼容问题,可以用vue的filters属性限制字数

html部分:
{{item | ellipsis}}
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;

你可能感兴趣的:(笔记:vue中filters处理多行文本溢出显示省略号解决兼容问题)