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實現。

 

"跟雨傘學做人，如果你不為別人擋風遮雨，誰又會把你高高舉在頭上。"