vue，html中字符串溢出为省略号总结

三种方法

1. css样式自带的文本溢出

以下为必要样式

.类名
{
  width: 50px;   /*设置文本长度，像素或者百分比*/
  overflow:hidden; /*溢出的部分隐藏*/
  white-space: nowrap; /*文本不换行*/
  text-overflow:ellipsis;/*ellipsis:文本溢出显示省略号（...）*/
}

2.过滤器过滤

<!--在要显示的{{}}括号中，加过滤器 -->
<div ">{{item.title | ellipsis}}</div>

export default {
  filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length >10) {
        return value.slice(0,10) + '...'
      }
      return value
    }
  },
  data() {}
}

这里超10个字数为溢出

3.三目判断

这个不能用在{{}}括号中，要用在绑定值中
这里绑定的值为label

<slot name="label">
  <div v-html="label.length > 10 ? label.slice(0, 10) + '...' :label" />
</slot>

补充 ： 多行文本超出省略号显示
css样式：

overflow: hidden;
text-overflow: ellipsis;
 width: 100%;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 3;  // 超过3行则显示省略号
 word-break: break-all;

如果对你有帮助点个赞哟(＾Ｕ＾）