文本溢出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：此屬性可以設置當文本溢出時將顯示省略標記(...)。

• 我們常用的文本溢出的經典代碼為：

• 當存在長英文文本時，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屬性類似，它具體的屬性設置，可以讓瀏覽器實現任意位置的換行。

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

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