背景
某天老板在群里反饋，英文單詞為什么被截斷了？
很顯然，這是我們前端的鍋，自行背鍋。這個問題太簡單了，css里加兩行屬性，分分鍾搞定。
開心的提交代碼，刷新頁面。我擦，怎么還是沒有斷詞？不可能啊！！！ 難道這兩個屬性有什么兼容性問題或者有什么限制條件？為了不搬石頭砸自己的腳，還是去深入了解一下。
css單詞斷詞、換行
關鍵字： word-break, word-wrap
提前聲明：上面的問題用這兩個屬性來解決並沒有什么問題，這里只是再加深鞏固一下知識。想了解原因的同學請直接看下一小節。
word-break, word-wrap這兩個屬性都比較常見，斷詞、溢出顯示省略號等常見功能都需要用到它們。但具體它們分別是什么意思，各自有什么屬性，可能很多人都不是很清楚。反正我不懂。每次都是從網上查一查就用上了，兩個屬性長得太像了，總是記不住。
來，先看文檔。
normal 使用瀏覽器默認的換行規則。
break-all 允許在單詞內換行。
keep-all 只能在半角空格或連字符處換行。
http://www.w3school.com.cn/cssref/pr_word-break.asp
normal 只在允許的斷字點換行（瀏覽器保持默認處理）。
break-word 在長單詞或 URL 地址內部進行換行。
http://www.w3school.com.cn/cssref/pr_word-wrap.asp
看懂了嗎？反正我好像沒看懂。
看圖貌似會好點。
http://www.w3school.com.cn/tiy/t.asp?f=css3_word-wrap
相信大概能看明白了，我簡單總結下：
-
word-break 當行尾放不下一個單詞時，決定單詞內部該怎么擺放。
break-all: 強行上，擠不下的話剩下的就換下一行顯示唄。霸道型。
keep-all: 放不下我了，那我就另起一行展示，再放不下，我也不退縮。傲驕型。
-
word-wrap 當行尾放不下時，決定單詞內是否允許換行
normal: 單詞太長，換行顯示，再超過一行就溢出顯示。
break-word: 當單詞太長時，先嘗試換行，換行后還是太長，單詞內還可以換行。
-
上面這些換行神馬的都是針對英文單詞，像CJK(中文/日文/韓文)這樣的語言就算了，因為他們不需要，不信你讀一下下面的文字
研表究明，漢字的序順並不定一能影閱響讀，比如當你看完這句話后，才發這現里的字全是都亂的。
這樣子都可以流暢閱讀，更別說斷詞了…
再回頭來看我們的問題，理論上加上了word-break: keep-all;word-wrap: break-word;應該沒問題了，看來還有別的坑。
空格轉換
關鍵字： white-space
確認word-break和word-wrap使用方法沒有錯后，開始檢查我們自己的代碼。抓包發現，后台同學返回的文本里空格全部以 來代替。
what？為什么要用轉義字符代替？為什么css不能識別這個轉義空格？
電話后台同學，告知：在很早之前的為了解決某個前端問題才這么做的。
抓耳撓腮，使勁回憶了下，確實有這么回事。
因為瀏覽器會自動將多個空格壓縮為一個空格顯示。為了還原用戶的原本輸入，才將空格進行html轉義。
-
很多用戶會用空格來換行或者實現寬字間距
-
字符畫也很好玩，壓縮空格就全亂了。不知道字符畫的請看下面
專業的字符畫制作人員會用全角空格來做，這樣就不擔心瀏覽器的空格合並問題了
ok,那 暫時還不能動它。
為什么瀏覽器會自動壓縮空格？
規范如此,就是這么任性https://www.w3.org/TR/REC-html40/struct/text.html#h-9.1
如果不自動壓縮空格，那我們寫html的時候就只能寫成1行了，否則先這樣的代碼就會出現大段的空白。
<div>
<div>
bananas
</div>
</div>
既然規范這么定了，埋了坑，肯定會想辦法讓你繞過的，想起了white-space。
white-space我們更多的時候只用到nowrap的屬性，來配合實現…的特效，實際它還有更多的姿勢未解鎖。
white-space: normal | nowrap | pre | pre-wrap | pre-line
我們重點關注pre開頭的幾個屬性。pre是preserve(保留)的縮寫。沒錯，它就跟保留空格有關系。
pre: 保留所有的空格和回車，且不允許折行。
pre-wrap: 保留所有的空格和回車，但是允許折行。
pre-line: 會合並空格，且允許折行
意思簡單明了，好像也不用解釋什么。
所以我們的解決方案來了：
后台按照用戶的輸入的原始空格返回，不用做轉義，前端加上
word-break: keep-all;
word-wrap: break-word;
white-space: pre-wrap;
蹭蹭蹭修改完，貌似沒什么問題。
不過，這些個屬性都是作用於Text上的，而我們的頁面里有很多都是富文本，如果將pre-wrap作用於富文本上的父節點上也會有同樣的功效嗎？
帶着疑問，測試了幾個富文本，果然出現了大段空白….
富文本里的html標簽之間有空格。
有興趣的同學可以在
http://www.taoba.com
http://www.qq.com
的body上加上white-space:pre-wrap看看效果。
那富文本的問題要怎么解決呢，黑科技登場了！！
無法反抗，那就享受吧。
既然瀏覽器會壓縮多個空格，那只要保證文本里每次只有一個空格相鄰不就可以了。
□ -> □
□□ -> □
□□□ -> □ □
□□□□ -> □ □
自動規避了瀏覽器的合並空格策略。
這個思路來自於富文本編輯器，寫過富文本編輯器的同學可能會不屑一顧，這個方案我們都用爛了.. 感謝你們！！
(寫個富文本編輯器是學習前端的最佳方式，歡迎閑的蛋疼的同學快去踩坑)
通知后台同學按照這個規則來改，問題搞定。
總結
-
word-wrap： 決定句尾放不下單詞時，單詞是否換行
-
word-break: 決定單詞內該怎么換行
-
平文本可以配合white-space: pre-wrap來解決多空格壓縮顯示問題
-
富文本采用的解決方案是對空格進行間隔html轉義，這種方法更靈活，可以適應不同的場景，也適用於平文本。