一直以來都只是知道這三個屬性都可以在某種情形下控制是否換行，但具體該使用哪一個屬性不是很清楚，實戰時就一個個試，哪個管用用哪個，今天整理了一下這三個屬性具體的意義。

一、white-space

white-space 是用來設定如何處理元素內的空白的，這裡的空白不僅僅指的空格，還包括換行符，所以它才能對文字是否換行有所控制。他的可選值和對應的描述如下：

1.normal：預設。空白會被瀏覽器忽略。也即是我們通常所知的連續的空白會合併為一個空格，行首的空格會完全忽略

2.pre：空白會被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標籤。

3.nowrap：文字不會換行，文字會在在同一行上繼續，直到遇到 <br> 標籤為止。

4.pre-wrap：保留空白符序列，但是正常地進行換行。實際使用時跟pre作用類似

5.pre-line：合併空白符序列，但是保留換行符。

二、word-wrap

word-wrap 屬性允許長單詞或 URL 地址換行到下一行。他的可選值和對應的描述如下：

1.normal：只在允許的斷字點換行（瀏覽器保持預設處理）。即使單詞長度超過容器寬度也不換行。

2.break-word：在長單詞或 URL 地址內部進行換行。

三、word-break

word-break 屬性規定自動換行的處理方法。他的可選值和對應的描述如下：

1.normal：使用瀏覽器預設換行規則

2.break-all：允許在單詞內換行。

3.keep-all：只能在半形空格或連字元處換行。

單從介紹來看，word-wrap:break-word和word-break:break-all似乎是一樣的，都是允許單詞內換行，但兩者有著很重要的不同之處。

首先要明確一點，word-wrap:break-word是針對長單詞或者連續字串的，它只有在單個單詞長度超過容器寬度的時候才會起作用。

而word-break:break-all不一樣，它是針對一行文字的，normal下，當一行文字超過容器寬度時會將最後一個單詞放到下一行顯示，而break-all會將最後一個單詞斷行顯示，以最大程度的鋪滿第一行。