搞懂word-break、word-wrap、white-space

        雖然不是專門搞CSS的，可是遇到了仍是記一下，不能由於一點點問題就去找人幫助。因此特別記錄這三個標籤的用法white-space、word-break、word-wrap（overflow-wrap）

測試代碼

(文末有本文中全部例子的代碼)
下面是本文中用於測試三個樣式屬性展示狀況的html代碼：

<div id="box">
  Hi&nbsp;&nbsp;,
  This   is a incomprehensibilities long word.
  </br>
  你好&nbsp;&nbsp;，
  這   是一個難以想象的長單詞
</div>複製代碼

如今只給了它一個寬度和邊框，沒有其它任何樣式，下面是它目前的展示狀況：

能夠看到，nbsp;和</br>能夠正常發揮做用，而連續的空格會被縮減成一個（好比This和is之間的三個空格變成了一個），換行符也全都無效。句子超過一行後會自動換行，而長度超過一行的單個單詞會超出邊界。
接下來咱們看下， 給它上面三個css屬性賦值後會出現什麼變化。

white-space

正如它的名字，這個屬性是用來控制空白字符的顯示的，同時還能控制是否自動換行。它有五個值：normal | nowrap | pre | pre-wrap | pre-line。由於默認是normal，因此咱們主要研究下其它四種值時的展示狀況。

（爲了方便比較，下文全部圖，左側爲normal即初始狀況，右側爲賦上相應值時的狀況）

先看下white-space:nowrap時的狀況：

不只空格被合併，換行符無效，連本來的自動換行都沒了！只有</br>才能致使換行！因此這個值的表現仍是挺簡單的，咱們能夠理解爲永不換行。

white-space:pre：

空格和換行符全都被保留了下來！不過自動換行仍是沒了。保留，因此pre實際上是preserve的縮寫，這樣就好記了。

white-space:pre-wrap：

顯然pre-wrap就是preserve+wrap，保留空格和換行符，且能夠自動換行。

white-space:pre-line：

空格被合併了，可是換行符能夠發揮做用，line應該是new line的意思，自動換行還在，因此pre-line實際上是preserve+new line+wrap。

我整理了一個表予以總結：

是否能發揮做用	換行符	空格	自動換行	</br>、nbsp;
normal	×	×（合併）	√	√
nowrap	×	×（合併）	×	√
pre	√	√	×	√
pre-wrap	√	√	√	√
pre-line	√	×（合併）	√	√

word-break

從這個名字能夠知道，這個屬性是控制單詞如何被拆分換行的。它有三個值：normal | break-all | keep-all。

word-break:keep-all：

全部「單詞」一概不拆分換行，注意，我這裏的「單詞」包括連續的中文字符（還有日文、韓文等），或者能夠理解爲只有空格能夠觸發自動換行

word-break:break-all：

全部單詞碰到邊界一概拆分換行，無論你是incomprehensibilities這樣一行都顯示不下的單詞，仍是long這樣很短的單詞，只要碰到邊界，都會被強制拆分換行。因此用word-break:break-all時要慎重呀。
這樣的效果好像並不太好呀，能不能就把incomprehensibilities拆一下，其它的單詞不拆呢？那就須要下面這個屬性了：

word-wrap（overflow-wrap）

word-wrap又叫作overflow-wrap：

word-wrap 屬性本來屬於微軟的一個私有屬性，在 CSS3 如今的文本規範草案中已經被重名爲 overflow-wrap 。 word-wrap 如今被看成 overflow-wrap 的 「別名」。 穩定的谷歌 Chrome 和 Opera 瀏覽器版本支持這種新語法。

這個屬性也是控制單詞如何被拆分換行的，其實是做爲word-break的互補，它只有兩個值：normal | break-word，那咱們看下break-word：

終於達到了上文咱們但願的效果，只有當一個單詞一整行都顯示不下時，纔會拆分換行該單詞。
因此我以爲overflow-wrap更好理解好記一些，overflow，只有長到溢出的單詞纔會被強制拆分換行！

（其實前面的word-break屬性除了列出的那三個值外，也有個break-word值，效果跟這裏的word-wrap:break-word同樣，然而只有Chrome、Safari等部分瀏覽器支持）

 

總結

最後總結一下三個屬性

• white-space，控制空白字符的顯示，同時還能控制是否自動換行。它有五個值：normal | nowrap | pre | pre-wrap | pre-line
• word-break，控制單詞如何被拆分換行。它有三個值：normal | break-all | keep-all
• word-wrap（overflow-wrap）控制長度超過一行的單詞是否被拆分換行，是word-break的補充，它有兩個值：normal | break-word

相信讀完了本文，你應該對white-space、word-break、word-wrap有比較系統的認識了吧，若是短期仍是記不住，收藏一下常看看就能記住的XD~若是你喜歡這篇文章的話，但願能點個贊~

大神寫的就是不同，保存到本身這裏才放心