css限制顯示字數，文字長度超出部分用省略符號表示【轉】

標籤：文字   over   表示   tle   name   名稱   文本   列表   長度   

為了保證頁面的整潔美觀，在很多的時候，我們常需要隱藏超出長度的文字。這在列表條目，題目，名稱等地方常用到。

(1).文字超出一行，省略超出部分，顯示‘...‘

如果這種情況比較多，可以取一個切合作用的類名用於複用。

.line-limit-length {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap; //文本不換行，這樣超出一行的部分被截取，顯示...

}

<div class="item">

<p class="line-limit-length">最新訊息：神秘地球黑洞深不可測，不停吸入周圍海水。</p>

<i class="icon icon-arrow-Go"></i> //表徵圖字型

</div>

 

(2). 可以給定容器寬度限制，超出部分省略

.product-buyer-name {

max-width: 110px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

<h5 class="product-buyer-name">橘子橘子</h5>

<h5 class="product-buyer-name">橘子橘子匿名使用者匿名</h5>

css限制顯示字數，文字長度超出部分用省略符號表示【轉】