文本超出寬度用省略號表示

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