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

2. 了解word-break屬性

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

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

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

3. 了解word-wrap屬性

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

break-word 一行單詞中實(shí)在沒(méi)有其他靠譜的換行點(diǎn)的時(shí)候換行

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

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

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

至于如何記憶這兩個(gè)CSS聲明呢？

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

總結(jié)：

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

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

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

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

總結(jié)

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

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