CSS 文字溢出 text-overflow，word-break，word-wrap，white-space

1. 什麼是單詞（word ）

英文的單詞我們都知道，空格分開的都是一個個單詞，中文的單詞在瀏覽器中指的一個字。

下面是一個瀏覽器判定單詞的例子：

中文 		//2 個單詞
Hello world //2 個單詞
Helloworld	//1 個單詞

2. word-wrap 和 word-break

word-wrap

值	描述
normal	只在允許的斷字點換行（瀏覽器保持默認處理）。
break-word	在長單詞或 URL 地址內部進行換行。

word-break

值	描述
normal	使用瀏覽器默認的換行規則。
break-all	允許在單詞內換行。
keep-all	只能在半角空格或連字符處換行。

word-wrap 和 word-break 都用來指定文字發生溢出時是否換行。
不同的是，
word-wrap 指定的是瀏覽器換行處理過程，遇到一個 word 超長，對文本已經換行了，但是仍然溢出，這時是否允許瀏覽器在單詞內斷句。
word-break 指定的是單詞內的斷句方式。

• word-wrap: normal
  
  正常狀態下，長單詞沒有被斷句。但是另起了一行。

• word-wrap: break-word
  
  設置換行時允許斷句後，單詞斷句了。

• word-break: break-all
  
  設置單詞斷句後，長單詞沒有另起一行，比 word-wrap 暴力。
  在線示例

3. white-space

white-space 屬性設置如何處理元素內的空白

值	描述
normal	默認。連續的空白符會被合併
pre	連續的空白符會被保留。其行爲方式類似 HTML 中的 標籤。
nowrap	連續的空白符會被合併，文本內的換行符被忽略，直到遇到 標籤爲止。
pre-wrap	連續的空白符會被保留，文本內的換行符有效。
pre-line	連續的空白符會被合併，但是保留換行符。
inherit	規定應該從父元素繼承 white-space 屬性的值。

在上面的例子中 word-break: break-all ，添加 white-space:nowrap ，可以看到沒有換行了。所以white-sapce 比 word-break 更暴力。

在線示例

4. text-verflow

text-overflow 用來設置文本溢出，並且不顯示的情況下，該怎樣展示給用戶。
常用來設置文本溢出顯示省略號。

請注意這裏的文本溢出，並且不顯示的情況。如果文本折行了，或者設置了 over-flow:visible，那麼 text-overflow 將不生效。

值	描述
clip	修剪文本。
ellipsis	顯示省略符號來代表被修剪的文本。
string	使用給定的字符串來代表被修剪的文本。(兼容性有問題)

這是三種值對應的運行結果，其中自定義省略字符在 chrome 中不被支持

在線示例