white-space、word-wrap和word-break的簡單整理

white-space 、 word-wrap 和 word-break 是決定段落中的文本如何展現的3個css屬性，屬性說明請點擊連接查看參考手冊。

white-space

white-space屬性定義瞭如何處理文本中的空白；具體到細節，主要決定決定了如何處理元素內文本中空白符、換行符、是否容許過長行折行;
其中，過長行是指那些單行內容寬度超出了容器寬度的行，如下列代碼爲例：

<!--html--> <p>ABCDEFGHIJKOMN</p>

/*css*/ p{width:4em;}

內容行ABCDEFGHIJKOMN渲染寬度爲7em，超過所在容器的指定寬度，那麼它屬於過長行。

white-space屬性各可能值的對比

white-space默認值爲normal，可選值包括pre、nowrap、pre-wrap、pre-line。

可選值各維度對比

下表對比分析了white-space各值在處理空白符、換行符、折行與否時的不一樣策略。

值	概述	空白符	換行符	過長行是否折行
normal	合併連續的空白符、換行符爲一個空白符；折行；	連續的多個空白符合併成一個；	換行符被當作空白符處理，一同合併；	折行（說明1）
pre	徹底保留代碼中格式；不折行；	全部空白符保留；	全部換行符保留；	不折行（說明2）
nowrap	合併連續的空白符、換行符爲一個空白符；不折行；	連續的多個空白符合併成一個；	換行符被當作空白符處理，一同合併；	不折行（說明2）
pre-wrap	保留全部空白符、換行符；折行；	全部空白符保留；	全部換行符保留；	折行（說明1）
pre-line	空白符合並；換行符保留；折行；	連續的多個空白符合併成一個；	全部換行符保留；	折行（說明1）

說明1：折行（ CJK遇到容器邊界自動換行；非CJK由word-wrap和word-break的值決定。）
說明2：不折行（行內容寬度超出容器寬度時的表現由overflow屬性決定；word-wrap和word-break設置爲任何值都不影響表現。）

其餘說明

1.以下方代碼(圖1)及相應效果圖(圖2)所示，段落中的換行效果可能來源於兩種不一樣的緣由。一種是段落中保留的換行符；另外一種狀況是過長行的折行效果。
前者在所屬容器寬度改變時，仍然是單獨一行；後者在所屬容器改變時可能合併到其他行中。

word-wrap和word-break

white-space值爲normal、pre-wrap、pre-line時，過長行遇到容器邊界時會觸發折行現象。white-space決定了過長行是否發生折行，而 word-wrap和word-break用於決定如何進行折行。

理解word-wrap和word-break的區別

從易於區分和理解的角度，我引用了「無雙」在你真的瞭解word-wrap和word-break的區別嗎？一文中對兩個css屬性做用的解釋：
word-wrap

word-wrap 屬性用來標明是否容許瀏覽器在單詞內進行斷句，這是爲了防止當一個字符串太長而找不到它的天然斷句點時產生溢出現象。

word-break

word-break 屬性用來標明怎麼樣進行單詞內的斷句。

關於word-wrap和word-break，咱們主要關注word-wrap:break-word和word-break:break-all的區別:
word-wrap先嚐試尋找空格、鏈接符等正常換行點，若是正常換行能知足不超出容器寬度的需求，正常換行；若是正常換行後仍然超出容器寬度，對非CJK長內容進行強制換行。
word-break:break:all直接強制在行末尾換行。

詳細論述和驗證建議參考張鑫旭大神的word-break:break-all和word-wrap:break-word的區別 和 無雙的你真的瞭解word-wrap和word-break的區別嗎？，兩篇文章闡述都清晰明瞭，此處不班門弄斧；引出基本的概念和理解主要爲了引出後續的組合引用效果表格。

word-wrap和word-break的組合引用效果

word-wrap默認值normal，可選值break-word;
word-break默認值normal，可選值爲break-all，keep-all。非CJK文本下，keep-all和normal的表現是一致的。
下表列出了word-wrap和word-break的組合使用效果。

組合	效果
word-wrap:normal; word-break:normal;	遵循默認規則折行； 如沒有-和空白符，不折行(說明1)；
word-wrap:normal; word-break:break-all;	內容遇到容器末尾強制執行換行；
word-wrap:break-word; word-break:normal;	優先嚐試正常折行； 正常折行後仍然過長的，強制在遇到容器末尾時換行；
word-wrap:break-word; word-break:break-all;	內容遇到容器末尾強制執行換行(非末行均佔滿容器寬度)； （不優先嚐試-和空白符等折行規則）

說明1：超出容器寬度後的效果優overflow屬性決定。

End