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

仅仅是word-break和word-wrap的定义就足以让人头晕，但是当具体比较这两者时，更容易像这样思考：

首先，您可能想使用overflow: auto;，并且您可能想尝试一下只使用它的效果：如果您可以容忍需要在容器中滚动文本而不是任意换行位置，那么它可能正是您所需要的。

然后请记住，在此上下文中，“单词”是一个没有空格的字符串。

word-break: break-all;

优先考虑最小化浪费空间，避免溢出，而不是保持任何单词不被打断，因此它从不在右边跨行。它甚至用空格替换了包含文本中的换行符。如果您想尽可能地避免滚动并使用足够宽的容器以便阅读，这很有用：但是如果您的容器太窄，则通常结果不是很令人满意，如Drkawashima noted。

word-wrap/overflow-wrap: break-word;

优先保持所有单词不被断开，同时避免溢出，因此如果一个单词太长无法放在一行中，它会首先换行，并尝试将剩余的文本放在下一行上，即使这意味着上一行只有一个字符长度。如果您希望在尽可能避免滚动条的情况下获得最大的可读性并使用足够宽的容器，则可以使用此属性：否则，您可能只想使用overflow: auto。

关于word-wrap，它实际上没有被替换（也许比全球使用的overflow-wrap更普遍认可）：它成为了overflow-wrap的别名，因为所有大型浏览器和许多网页已经采用了word-wrap，尽管它最初没有在标准中定义。

然而，由于广泛使用，当定义overflow-wrap时，它并没有被废弃，而是作为今天的别名进行了定义，并且出于遗留原因，UAs（用户代理，例如Web浏览器）必须将word-wrap视为overflow-wrap属性的遗留名称别名。因此，它已经成为W3C的实际标准，并且不会很快消失（也许在W3C标准灭绝或整个Web被具有AI的机器人普遍更新时才会消失）。 5.5. Overflow Wrapping: the overflow-wrap/word-wrap property overflow-wrap (MDN)

CSS中的word-break属性用于指定单词在行末如何被分割或拆分。而word-wrap属性则用于将长单词分割/拆分并换行到下一行。

“word-break: break-all;”和“word-wrap: break-word;”之间的区别：

word-break: break-all;：它用于在任何字符处断开单词以防止溢出。

word-wrap: break-word;：它用于在任意点断开单词以防止溢出。

overflow-wrap: break-word;

参考资料

overflow-wrap (MDN)