1.css实现:单行文本
设置属性:text-overflow:ellipsis;
<div class="message">
<p class="msg-body">{{item.title}}</p>
<p class="msg-time">{{item.receiveTime}}</p>
</div>
.msg-body{
color:#666;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
多行文本显示省略号见博客:https://blog.csdn.net/zhumengzj/article/details/80801556
2.vue用过滤器实现,超出指定字数显示省略号:
<div class="message">
<p class="msg-body">{{item.title | ellipsis}}</p>
<p class="msg-time">{{item.receiveTime}}</p>
</div>
filters: {
// 消息下拉框超过25字用...代替
ellipsis(value) {
if (!value) return '';
if (value.length > 25) {
return `${value.slice(0, 25)}...`;
}
return value;
},
},
methods:{
...
},