文本溢出text-overflow

本文轉載於:猿2048網站文本溢出text-overflow

在實際應用中，咱們常常會遇到本文換行和文本溢出時截取字符串的狀況，在理解文本溢出屬性以前，咱們首先要了解文本換行和空白符這兩個屬性，而後再學習文本溢出text-overflow屬性。

• white-space屬性：用來對空格進行處理。

可能的屬性值有：

（2）pre：使用pre屬性值的時候，空白和換行將會被保留,同時超出容器邊緣也不會換行。相似於HTML中的<pre>標籤。

 

（1）normal：默認屬性值，多餘的空白會被瀏覽器忽略掉，只會保留一個空格效果。

 

（3）nowrap：強制在同一行內顯示全部文本，合併文本間的多餘空白，直到碰到了換行標籤<br />爲止。

 

（4）pre-line：合併空白序列，但保留換行符，IE8如下瀏覽器不支持此屬性。

 

（5）pre-wrap：保留空白符序列，可是正常進行換行，IE8如下瀏覽器不支持此屬性。

 

（6）inherit：規定應該從父元素繼承white-space屬性的值，此屬性值在全部的IE版本都不支持。

• 文本換行word-wrap屬性：

一個div內，一般但願文字超過div的寬度就會實現自動換行，若是是漢字，那麼一切順利，但若是是連續的英文字符或者數字就會超出容器的邊界。可是word-wrap屬性則可以實現它的換行功能。

可能的屬性值：

（1）normal：默認值，保持瀏覽器的默認處理，只在容許的斷字點換行，也就是非連續的英文字符數字或者漢字能夠進行換行。

（2）break-word：此屬性值能夠實現內容換行，也就是能夠實如今邊界內換行，不可以超出邊界。它不會將單詞截斷進行換行，要儘量的保持單詞的完整性。table默認狀態下並不支持word-wrap:break-word，須要進行一下特殊處理。

 

 

• 文本溢出 text-overflow屬性

（1）clip：此屬性值表示直接裁切，並不顯示省略標記(...)。

（2）ellipsis：此屬性能夠設置當文本溢出時將顯示省略標記(...)。

• 咱們經常使用的文本溢出的經典代碼爲：

white-space： nowrap；（強制文本在一行顯示） overflow：hidden；（強制文本在一行顯示） text-overflow：ellipsis；

 

• 當存在長英文文本時，text-overflow屬性起做用的前提是overflow(或overflow-y或overflow-x):hidden | auto | scroll
• 當文本爲漢字時，text-overflow屬性起做用的前提是實現漢字不自動換行可以使用word-break: keep-all; 或 white-space: nowrap; overflow(或overflow-y或overflow-x):hidden | auto | scroll

• 自動換行word-break屬性：

此屬性用法與word-wrap屬性相似，它具體的屬性設置，可讓瀏覽器實現任意位置的換行。

normal：中文到邊界上的漢字換行，英文從整個單詞換行

 

keep-all：對於英文長文本不能換行，但對於中文的處理，各瀏覽器不一致，截圖爲在chrome中的表現。（在空白符及標點處換行）

 

break-all： 對於英文長單詞來講，會截斷單詞換行，長單詞佔據當前行剩餘空間。但對於中文的處理，各瀏覽器不一致，截圖爲在chrome中的表現。（中文到邊界上的漢字換行，但不容許標點置於段首）