单行文本、多行文本显示省略号…

一、CSS实现

单行文本

.ellipsis{
width: 200px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}

多行文本

.ellipsis{
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; // 数字就是超出几行出现省略号
-webkit-box-orient: vertical;
}

二、 js实现

vue项目用于过滤器：
　filters: {
　　 //处理多行文本…
　　 //示例 {{text | ellipsis(20)}} 20为限制字数
　　ellipsis(text,num) {
　　　　if(text.length > num){
　　　　　 return text.substring(0, num) + ‘…’;
　　　　}else {
　　　　　 return text;
　　　　　　}
　　　　},
　　}