CSS 中 word : break-all 和 word: wrap break有什么区别？

CSS 的 word-break 和 word-wrap（也称为 overflow-wrap）是控制文本换行行为的属性。它们的作用略有不同，可以用于处理文本在容器内溢出时的情况。

word-break

word-break 属性主要用于指定如何在单词内部进行换行。

• normal：使用默认的换行规则。
• break-all：允许在单词内部任意位置进行换行。适用于多字节字符（如中文、日文、韩文等），也会对非多字节字符（如英文）起作用，甚至在单词中间也可能换行。
• keep-all：CJK（中文、日文、韩文）脚本中，不允许词内换行，但非CJK脚本表现得像 normal。

举例：

css
.word-break-example {
  word-break: break-all;
}

在这个例子中，如果有一个很长的英文单词或者字符串没有空格，并且它超过了容器的宽度，它会在容器边界内的任何位置换行，不考虑单词边界。

word-wrap / overflow-wrap

word-wrap（在 CSS3 中被重命名为 overflow-wrap）属性指定了当单词太长而无法放在其容器内时，是否应该被中断到下一行。

• normal：单词不会被分割，只会在允许的断字点换行。
• break-word：在长单词或 URL 地址内部进行换行，以避免文本溢出其包含元素。

举例：

css
.word-wrap-example {
  word-wrap: break-word;
}

或者使用 overflow-wrap:

css
.overflow-wrap-example {
  overflow-wrap: break-word;
}

在这两个例子中，如果文本包含一个长单词，这个单词会在容器边缘处被断开，并继续在下一行显示，从而避免溢出容器。

总结

两者的区别在于对于单词内部断行的处理：

• 使用 word-break: break-all; 时，长单词和连续的非空白字符序列将在任何字符之间断开，以确保不会溢出容器。
• 使用 word-wrap: break-word;（或 overflow-wrap: break-word;）时，文本只有在必要时才会在单词内部断行，更倾向于在保持单词完整性的同时防止溢出。

在实际使用时，word-wrap: break-word; 通常被认为更优雅，因为它会尽可能保持单词的完整性。而 word-break: break-all; 可能会在不理想的位置断开单词，从而影响阅读体验。不过，对于某些语言（如中文），这两个属性的效果可能相似，因为中文不依赖空格分隔单词。

word-wrap: break-word最近更改为overflow-wrap: break-word

• 会将长单词换行到下一行。
• 调整不同的单词，使它们不会在中间中断。

word-break: break-all

• 无论是连续的单词还是多个单词，都会在宽度限制的边缘将它们分开。 （即即使在同一个单词的字符内）

因此，如果您有许多动态获取内容的固定大小的跨度，您可能更喜欢使用word-wrap: break-word，因为这样只有连续的单词才会在中间被打破，并且如果它是一个包含许多单词的句子，则会调整空格以获得完整的单词（一个字内没有中断）。

如果不重要的话，就选其中一个吧。

讨论这些的 W3 规范似乎表明，这word-break: break-all是要求 CJK（中文、日文和韩文）文本的特定行为，而word-wrap: break-word是更一般的、不支持 CJK 的行为。

对于word-break，一个很长的单词从它应该开始的位置开始，并且根据需要将其断开：

shell
[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live
inside this narrow paragr
aph.

但是，使用 时word-wrap，很长的单词_将不会_从应开始的位置开始。

它会换行到下一行，然后根据需要中断

shell
[X] I am a text that
012345678901234567890123
4567890123456789 want to
live inside this narrow
paragraph.

word-wrap已更名为overflow-wrap“可能”以避免这种混乱。

现在这就是我们所拥有的：

溢出包装

Overflow -wrap属性用于指定浏览器是否可以在单词中换行，以防止当原本不可分割的字符串太长而无法放入其包含框时溢出。

可能的值：

• 正常：表示行只能在正常的单词断点处断行。

• break-word：表示如果行中没有其他可接受的断点，则通常不可断的单词可以在任意点处断。

来源。

断词

word -break CSS 属性用于指定是否在单词内换行。

• 正常：使用默认换行规则。
• break-all ：可以在非CJK （中文/日文/韩文）文本的任何字符之间插入分词符。
• keep-all：不允许 CJK 文本断字。非 CJK 文本行为与正常文本行为相同。

来源。

现在回到你的问题。溢出换行和断字之间的主要区别在于，前者确定_溢出_情况下的行为，而后者确定_正常_情况（无溢出）下的行为。当容器没有足够的空间来容纳文本时，就会发生溢出_情况_。在这种情况下断线没有帮助，因为没有空间（想象一个具有固定宽度和高度的盒子）。

所以：

• overflow-wrap: break-word：在溢出的情况下，中断单词。
• word-break: break-all：正常情况下，将行尾的单词打断即可。溢出是不必要的。

至少在 Firefox（自 v24 起）和 Chrome（自 v30 起）中，当应用于元素中的内容时table：

word-wrap:break-word

实际上不会导致长字换行，这可能导致表超出其容器的边界；

word-break:break-all

_将_导致文字换行，并且表格适合其容器。

jsfiddle 演示。