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>