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>