CSS 屬性篇(八)：word-wrap、word-break、white-space屬性

1、簡介說明

本文主要是講解word-wrap和word-break屬性的含義與兩者之間的區別，以及whtite-space各個屬性值以前的區別。

正常狀況下，若是有一個單詞很長，致使一行中剩下的空間已經放不下它時，則瀏覽器會把這個單詞挪到下一行去：

可是若是這個單詞挪到下一行中仍是一整行都存放不下，它就會溢出它的父容器。

2、word-wrap屬性

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

word-wrap: normal | break-word

• normal：單詞太長，剩餘空降不足則挪到下一行顯示，在下一行中超過一行就溢出顯示。
• break-word：單詞太長，剩餘空降不足則挪到下一行顯示，在下一行中超過一行就在單詞內換行。

3、word-break屬性

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

word-break: normal | break-all | keep-all

• normal：單詞太長，剩餘空降不足則挪到下一行顯示，在下一行中超過一行就溢出顯示。
• break-all：單詞太長，剩餘空間不足就直接在單詞內換行顯示。
• keep-all：單詞太長，不會換行，直接溢出顯示，只有在半角空格或連字符處纔會換行。

4、white-space屬性

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

white-space: normal | nowrap | pre | pre-wrap | pre-line | inherit

• normal：默認。空白會被瀏覽器忽略。
• nowrap：文本不會換行，文本會在在同一行上繼續，直到遇到 br 標籤爲止。
• pre：空白會被瀏覽器保留。其行爲方式相似 HTML 中的 pre 標籤。
• pre-wrap：保留空白符序列，可是正常地進行換行。
• pre-line：合併空白符序列，可是保留換行符。
• inherit：規定應該從父元素繼承 white-space 屬性的值。

	換行符	空格和Tab	文本超出容器寬度
normal	忽略	摺疊	換行
nowrap	忽略	摺疊	不換行
pre	換行	保持原樣	不換行
pre-wrap	換行	保持原樣	換行
pre-line	換行	摺疊	換行