vue——超出宽度宽度点点显示

1.css

1)宽度固定

.vue-ellipsis{
     overflow: hidden;    //超出隐藏
       white-space: nowrap;  //不换行
       text-overflow:ellipsis;//点点显示
}

2.substring截取字符串长度

 如果遇到这种需要显示new,又不能换行的情况建议使用substring方法

substring(start,end) 开始字符,结束字符

例如:substring(0,9) 截图从0到10个字符

注意需要判断,超过固定字数点点显示,如果没超过显示全部

例如:

<p class="itemTit" v-if="item.title.length > 50">{{item.title.substring(0,44) + "..."}}<img class="newIcon" src="../../../assets/img/new_icon.png" ></p>
<p class="itemTit" v-else>{{item.title}}<img class="newIcon" src="../../../assets/img/new_icon.png" ></p>
原文地址:https://www.cnblogs.com/cqiong/p/15005604.html