.jpg)
在css中，word-break和overflow-wrap（原word-wrap）用于控制文本換行，但使用場(chǎng)景不同。word-break偏向強(qiáng)制斷詞，不考慮語(yǔ)義合理性；overflow-wrap則優(yōu)先保持單詞完整，只在必要時(shí)斷開(kāi)。1. word-break: break-all;會(huì)在任意字符間斷開(kāi)長(zhǎng)單詞或無(wú)空格字符串，而overflow-wrap: break-word;僅在單詞無(wú)法整體放入當(dāng)前行時(shí)才斷開(kāi)。2. word-break的行為受語(yǔ)言影響，在中文等語(yǔ)言中允許在任意字符換行，英文則默認(rèn)不斷開(kāi)；overflow-wrap不受語(yǔ)言影響。3.防止布局被撐破建議用overflow-wrap，適用于評(píng)論、url等內(nèi)容；需要強(qiáng)制斷開(kāi)所有長(zhǎng)內(nèi)容可用word-break，適合表格數(shù)據(jù)展示。4. 使用時(shí)需注意white-space屬性的影響，避免換行失效。
在css中，word-break 和 word-wrap（現(xiàn)在叫 overflow-wrap）都用于控制文本在容器中的換行行為，特別是在處理長(zhǎng)單詞或連續(xù)無(wú)空格字符串時(shí)非常有用。但它們的使用場(chǎng)景和效果并不完全一樣。
簡(jiǎn)單來(lái)說(shuō)：
- word-break 更偏向于“強(qiáng)制斷詞”，不考慮語(yǔ)義是否合理。
- word-wrap（或 overflow-wrap）則更“智能”，優(yōu)先保持單詞完整，只有在不得已時(shí)才斷開(kāi)。
下面從幾個(gè)實(shí)際常用的場(chǎng)景來(lái)具體說(shuō)說(shuō)它們的區(qū)別和用法。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
1. 基本作用區(qū)別：什么時(shí)候該用哪個(gè)？
-
word-break: break-all;
會(huì)忽略正常的斷詞規(guī)則，強(qiáng)制在字符間斷開(kāi)（比如一個(gè)很長(zhǎng)的英文單詞會(huì)被切開(kāi)），即使那不是一個(gè)合理的斷點(diǎn)。 -
overflow-wrap: break-word;（舊稱(chēng) word-wrap: break-word;）
只有當(dāng)整個(gè)單詞無(wú)法放入當(dāng)前行時(shí)，才會(huì)斷開(kāi)這個(gè)單詞。它會(huì)盡量保留單詞的完整性。
舉個(gè)例子：如果你有一串像 thisisareallylongwordwithoutspaces 這樣的內(nèi)容：
- 使用 word-break: break-all;，會(huì)在任意位置斷開(kāi)；
- 使用 overflow-wrap: break-word;，也會(huì)斷開(kāi)，但只在必要時(shí)。
2. 多語(yǔ)言支持上的差異
這是很多人容易忽略的一點(diǎn)：
-
word-break 對(duì)不同語(yǔ)言有不同的默認(rèn)行為：
- 在中文、日文等語(yǔ)言中，word-break: normal; 允許在任何字符之間換行。
- 英文下，默認(rèn)不會(huì)斷開(kāi)單詞。
-
overflow-wrap 的行為基本不受語(yǔ)言影響，它主要看的是單詞是否可以整體放入當(dāng)前行。
所以如果你做的是多語(yǔ)言網(wǎng)站，尤其是包含中文和英文混合的內(nèi)容，要特別注意這兩個(gè)屬性的行為差異。
3. 實(shí)際應(yīng)用場(chǎng)景建議
需要防止布局被撐破？用 overflow-wrap
當(dāng)你希望盡可能保留單詞完整性，又不想因?yàn)橐淮疀](méi)有空格的文本把布局撐開(kāi)，可以用：
overflow-wrap: break-word;
適用于用戶(hù)輸入的評(píng)論、URL、代碼片段等內(nèi)容。
明確需要斷開(kāi)所有長(zhǎng)內(nèi)容？用 word-break
如果內(nèi)容全是無(wú)空格的字符串，或者你不在乎是否美觀(guān)，只想讓內(nèi)容適應(yīng)容器寬度，可以用：
word-break: break-all;
常見(jiàn)于表格內(nèi)容自動(dòng)對(duì)齊、數(shù)據(jù)展示類(lèi)頁(yè)面。
4. 小貼士：別忘了配合 white-space 使用
有時(shí)候你會(huì)發(fā)現(xiàn)設(shè)置了 word-break 或 overflow-wrap 沒(méi)有效果，可能是因?yàn)楦冈赜昧耍?/p>
white-space: nowrap;
這會(huì)讓子元素?zé)o法換行，這時(shí)候就需要調(diào)整 white-space 的值為 normal 或 pre-wrap 等允許換行的選項(xiàng)。
基本上就這些。兩個(gè)屬性看似相似，但用錯(cuò)場(chǎng)景可能會(huì)導(dǎo)致排版混亂或用戶(hù)體驗(yàn)不佳。理解清楚它們的適用范圍，能幫你少踩不少坑。
.png)
