文本超出宽度用省略号表示

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:{
  ...
},