css文本省略號

這裏記錄下如何用CSS實現單行、多行文本溢出容器的時候用省略號代替溢出部分。

單行文本溢出容器時顯示省略號的CSS實現方法

/* 規定當內容溢出元素框（容器）時隱藏 */ overflow: hidden; /* 規定當文本溢出包含元素（容器）出現省略號 */ text-overflow: ellipsis; /* 規定段落中的文本不進行換行 */ white-space: nowrap;

要注意的是，由於是要在文本溢出容器時候顯示省略號，所以容器是須要有固定的寬度的。

示例：我是想要省略號的文本，哈哈哈哈哈哈啊哈哈。

在上面的示例中，後面的85646464654495467417個哈哈哈都被省略成省略號了。

而後咱們來對這些屬性和值逐個分解。

overflow

overflow屬性規定當內容溢出元素框時發生的事情。

值	描述
visible	默認值。內容不會被修剪，會呈如今元素框以外。
hidden	內容會被修剪，而且其他內容是不可見的。
scroll	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit	規定應該從父元素繼承overflow屬性的值，IE不支持這個值。

這裏使用的是hidden。

text-overflow

text-overflow屬性規定當文本溢出包含元素時發生的事情。

值	描述
clip	默認值。修剪文本。
ellipsis	顯示省略符號來表明被修剪的文本。
string	使用給定的字符串來表明被修剪的文本。

這裏使用的是ellipsis，是顯示省略號的重點。

white-space

white-space屬性規定如何處理元素內的空白。

值	描述
normal	默認值。空白會被瀏覽器忽略。
pre	空白會被瀏覽器保留。其行爲方式相似HTML中的<pre>標籤。
nowrap	文本不會換行，文本會在在同一行上繼續，直到遇到<br>標籤爲止。
pre-wrap	保留空白符序列，可是正常地進行換行。
pre-line	合併空白符序列，可是保留換行符。
inherit	規定應該從父元素繼承white-space屬性的值，IE不支持這個值。

這裏使用的是nowrap。

多行文本溢出容器時顯示省略號的CSS實現方法

overflow: hidden; /* 用來限制在一個塊元素顯示的文本的行數。爲了實現該效果，它須要組合其餘的WebKit屬性，好比下面的兩個 */ -webkit-line-clamp: 3; /* 必須結合的屬性，將對象做爲彈性伸縮盒子模型顯示 */ display: -webkit-box; /* 必須結合的屬性，設置或檢索伸縮盒對象的子元素的排列方式，這裏是垂直 */ -webkit-box-orient: vertical;

多行這個用的是Webkit的CSS擴展屬性，所以只兼容Webkie內核的瀏覽器，實際場景基本用不上（我沒有用過因此這麼說，網上找的，嘻嘻）。

同時這些擴展屬性也比較新，不知道有沒有什麼稀奇古怪的Bug（檸檬酸），已知的一個問題是即便末行文本未超出行的狀況下也會出現省略號。所以建議仍是想一想別的折衷方法，好比修改頁面佈局配合其餘CSS屬性實現或用JavaScript實現。

 

"跟雨傘學作人，若是你不爲別人擋風遮雨，誰又會把你高高舉在頭上。"