CSS單詞換行and斷詞

背景

某天老闆在羣裏反饋，英文單詞爲何被截斷了？

很顯然，這是咱們前端的鍋，自行背鍋。這個問題太簡單了，css里加兩行屬性，分分鐘搞定。

 

1 2	word – break : keep – all ; word – wrap : break – word ;

開心的提交代碼，刷新頁面。我擦，怎麼仍是沒有斷詞？不可能啊！！！ 難道這兩個屬性有什麼兼容性問題或者有什麼限制條件？爲了避免搬石頭砸本身的腳，仍是去深刻了解一下。

css單詞斷詞、換行

關鍵字： word-break,  word-wrap

提早聲明：上面的問題用這兩個屬性來解決並無什麼問題，這裏只是再加深鞏固一下知識。想了解緣由的同窗請直接看下一小節。

word-break, word-wrap這兩個屬性都比較常見，斷詞、溢出顯示省略號等常見功能都須要用到它們。但具體它們分別是什麼意思，各自有什麼屬性，可能不少人都不是很清楚。反正我不懂。每次都是從網上查一查就用上了，兩個屬性長得太像了，老是記不住。

來，先看文檔。

 

1	word – break : normal | break – all | keep – all ;

normal 使用瀏覽器默認的換行規則。
break-all 容許在單詞內換行。
keep-all 只能在半角空格或連字符處換行。

http://www.w3school.com.cn/cssref/pr_word-break.asp

 

1	word – wrap : normal | break – word ;

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

相信大概能看明白了，我簡單總結下：

1. word-break 當行尾放不下一個單詞時，決定單詞內部該怎麼擺放。
   break-all: 強行上，擠不下的話剩下的就換下一行顯示唄。霸道型。
   keep-all: 放不下我了，那我就另起一行展現，再放不下，我也不退縮。傲驕型。
2. word-wrap 當行尾放不下時，決定單詞內是否容許換行
   normal: 單詞太長，換行顯示，再超過一行就溢出顯示。
   break-word: 當單詞太長時，先嚐試換行，換行後仍是太長，單詞內還能夠換行。
3. 上面這些換行神馬的都是針對英文單詞，像CJK(中文/日文/韓文)這樣的語言就算了，由於他們不須要，不信你讀一下下面的文字

研表究明，漢字的序順並不定一能影閱響讀，好比當你看完這句話後，才發這現裏的字全是都亂的。

這樣子均可以流暢閱讀，更別說斷詞了…

再回頭來看咱們的問題，理論上加上了word-break: keep-all;word-wrap: break-word;應該沒問題了，看來還有別的坑。

空格轉換

關鍵字：   white-space

確認word-break和word-wrap使用方法沒有錯後，開始檢查咱們本身的代碼。抓包發現，後臺同窗返回的文本里空格所有以 來代替。

what？爲何要用轉義字符代替？爲何css不能識別這個轉義空格？

電話後臺同窗，告知：在很早以前的爲了解決某個前端問題才這麼作的。
抓耳撓腮，使勁回憶了下，確實有這麼回事。
由於瀏覽器會自動將多個空格壓縮爲一個空格顯示。爲了還原用戶的本來輸入，纔將空格進行html轉義。

1. 不少用戶會用空格來換行或者實現寬字間距
2. 字符畫也很好玩，壓縮空格就全亂了。不知道字符畫的請看下面
   
   

專業的字符畫製做人員會用全角空格來作，這樣就不擔憂瀏覽器的空格合併問題了

ok,那 暫時還不能動它。

爲何瀏覽器會自動壓縮空格？

1. 規範如此,就是這麼任性https://www.w3.org/TR/REC-html40/struct/text.html#h-9.1
2. 若是不自動壓縮空格，那咱們寫html的時候就只能寫成1行了，不然先這樣的代碼就會出現大段的空白。
3.  

    

    

    

    

    

   XHTML

    

   <div> <div> bananas </div> </div>

   1 2 3 4 5

   <div> <div> bananas </div> </div>

    

既然規範這麼定了，埋了坑，確定會想辦法讓你繞過的，想起了white-space。
white-space咱們更多的時候只用到nowrap的屬性，來配合實現…的特效，實際它還有更多的姿式未解鎖。

 

 

white-space: normal | nowrap | pre | pre-wrap | pre-line 咱們重點關注pre開頭的幾個屬性。pre是preserve(保留)的縮寫。沒錯，它就跟保留空格有關係。

1 2	white - space : normal | nowrap | pre | pre - wrap | pre - line 咱們重點關注 pre開頭的幾個屬性。 pre是 preserve (保留 )的縮寫。沒錯，它就跟保留空格有關係。

 

 

pre: 保留全部的空格和回車，且不容許折行。
pre-wrap: 保留全部的空格和回車，可是容許折行。
pre-line: 會合並空格，且容許折行

意思簡單明瞭，好像也不用解釋什麼。

因此咱們的解決方案來了：
後臺按照用戶的輸入的原始空格返回，不用作轉義，前端加上

 

 

 

 

 

 

CSS

 

word-break: keep-all; word-wrap: break-word; white-space: pre-wrap;

1 2 3

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看看效果。

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

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

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

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

總結

1. word-wrap： 決定句尾放不下單詞時，單詞是否換行
2. word-break: 決定單詞內該怎麼換行
3. 平文本能夠配合white-space: pre-wrap來解決多空格壓縮顯示問題
4. 富文本採用的解決方案是對空格進行間隔html轉義，這種方法更靈活，能夠適應不一樣的場景，也適用於平文本。