背景

某天老板在群里反饋，英文單詞為什么被截斷了？

很顯然，這是我們前端的鍋，自行背鍋。這個問題太簡單了，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行了，否則先這樣的代碼就會出現大段的空白。

bananas

既然規范這么定了，埋了坑，肯定會想辦法讓你繞過的，想起了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.comhttp://www.qq.com

的body上加上white-space:pre-wrap看看效果。

那富文本的問題要怎么解決呢，黑科技登場了！！

無法反抗，那就享受吧。既然瀏覽器會壓縮多個空格，那只要保證文本里每次只有一個空格相鄰不就可以了。□ -> □□□ -> □ □□□ -> □ □□□□□ -> □ □ 自動規避了瀏覽器的合并空格策略。

這個思路來自于富文本編輯器，寫過富文本編輯器的同學可能會不屑一顧，這個方案我們都用爛了.. 感謝你們！！(寫個富文本編輯器是學習前端的最佳方式，歡迎閑的蛋疼的同學快去踩坑)

通知后臺同學按照這個規則來改，問題搞定。

總結 word-wrap： 決定句尾放不下單詞時，單詞是否換行

word-break: 決定單詞內該怎么換行

平文本可以配合white-space: pre-wrap來解決多空格壓縮顯示問題

富文本采用的解決方案是對空格進行間隔html轉義，這種方法更靈活，可以適應不同的場景，也適用于平文本。

本條技術文章來源于互聯網，如果無意侵犯您的權益請點擊此處反饋版權投訴

本文系統來源：php中文網

總結

以上是生活随笔為你收集整理的html遇到英文单词整体换行,CSS单词换行and断词，你真的完全了解吗_html/css_WEB-ITnose...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。