先從white-space談起，white-space顧名思議，控制“空白空間”。為了看清區別，我們設置一段源文本，包含三行文本（非br換行），每一行可能包含連續多個空格。如下圖
再將white-space設置成不同的值，可以清楚地看到各個值之前的區別
normal——? ? ?合并多個空格：是；? ? 源文本換行符換行：否；自動換行：是
pre-line——????合并多個空格：是；? ? 源文本換行處換行：是；自動換行：是
pre-wrap——? 合并多個空格：否；????源文本換行處換行：是；自動換行：是
pre——? ? ? ? ? ?合并多個空格：否；? ? 源文本換行處換行：是；自動換行：否
no-wrap——? ?合并多個空格：是；? ? 源文本換行處換行：否；自動換行：否
但是，如果某個單詞很長，white-space是否會自動換行呢？我們試一下，在preWrap的文本中加一個無空格的長單詞，很遺憾，長單詞并沒有自動換行。
因此，可以明確：white-space只對空白相關的顯示進行處理，white-space的自動換行，也只會在空白中進行自動換行。
但是，對于長單詞，怎么處理？
看下一個屬性，word-break，同樣顧名思義，word-break是處理單詞換行的屬性。把所有屬性列出來看看區別
以下都先設置了white-space:pre-wrap
break-word——換單詞換行，盡量不截斷單詞本身；對于當前行顯示不全的單詞，先換到一個新行，如果還是顯示不全，則按字符換行。
break-all——? ?換字符換行。優點是看上去左右都對齊，缺點是行末的單詞會被截斷，影響閱讀。
keep-all——? ? 單詞不換行。超出的就顯示到元素外
normal——? ? ? 看上去和keep-all一樣。
新的問題來了，normal和keep-all到底有沒有區別？我們加上漢字試試
看出區別了嗎？?
normal——對于漢字（嚴格來說是Chinese/Japanese/Korean (CJK)）會換字符自動換行
keep-all——對CJK文字，也只按空白和符號換行。
所以，如果我們希望文字顯示達到如下條件
1、空格，換行盡量和原文一致
2、確實超出的自動換行
3、盡量不影響閱讀（按單詞換行）
需要設置的CSS為
white-space:?pre-wrap;
word-break:?break-word;
效果如下
最后，關于word-wrap，其實wror-wrap只是早期瀏覽器的word-break不完善時，對word-break的補充
word-wrap具有可選值為：break-word, normal。效果和word-break對應的值效果一樣。
