1. CSS的學習，就我個人看來，是有別于JavaScript這張傳統(tǒng)程序語言的學習的。本身屬性就多，值也多，不同屬性在一起表現(xiàn)也不一樣，不同屬性和不同類型的HTML標簽在一起又不一樣，再加上兼容性差異和未定義行為。就像是很多個不確定因素，有著無窮多的組合和可能性。掌握這些不確定性，看書是絕對不夠的，一定是要多多實踐，多多思考，多多積累。對于底層機理的理解，也是需要一定的天賦的

2. 了解word-break屬性

normal 使用默認的換行規(guī)則

break-all 允許任意非CJK(Chinese/Japanese/Korean)文本間的單詞斷行

keep-all 不允許CJK(Chinese/Japanese/Korean)文本中的單詞換行，只能在半角空格或連字符處換行。非CJK文本的行為實際上和normal一致

3. 了解word-wrap屬性

normal 就是大家平常見得最多的正常的換行規(guī)則

break-word 一行單詞中實在沒有其他靠譜的換行點的時候換行

4. 回歸重點，word-break:break-all和word-wrap:break-word的區(qū)別

這兩個聲明都能是連續(xù)英文字符換行，那區(qū)別在哪里呢？

可以發(fā)現(xiàn)，word-break:break-all正如其名字，所有的都換行。毫不留情，一點空隙都不放過。而word-wrap:break-word則帶有憐憫之心，如果這一行文字有可以換行的點，如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韓文)之類的，則就不打英文單詞或字符的主意了，讓這些換行點換行，至于對不對齊，好不好看，則不關(guān)心，因此，很容易出現(xiàn)一片一片牛皮癬一樣的空白的情況。

至于如何記憶這兩個CSS聲明呢？

首字母走起：wbba(微博吧), wwbw(我五百萬)

總結(jié)：

1. word-spacing是單詞之間間距的，white-space是字符是否換行顯示的

2. word-break:break-all正如其名字，所有的都換行。毫不留情，一點空隙都不放過

3. word-wrap:break-word則帶有憐憫之心，如果這一行文字有可以換行的點，如空格，或CJK(Chinese/Japanese/Korean)(中文/日文/韓文)之類的，則就不打英文單詞或字符的主意了，讓這些換行點換行，至于對不對齊，好不好看，則不關(guān)心

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的word-break:break-all和word-wrap:break-word的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。