“word-break: break-all”和“word-wrap: break-word”的区别是什么?
当我两个都用的时候，如果它不适合容器，它们似乎就会破坏单词。但是为什么W3C制定了两种方法来实现呢?
当前回答
讨论这些问题的W3规范似乎表明，word-break: break-all是为了要求CJK(中文、日语和韩语)文本具有特定的行为，而word-wrap: break-word是更一般的、不了解CJK的行为。
其他回答
换行被重命名为溢出换行可能是为了避免这种混淆。
现在我们得到的是:
overflow-wrap
overflow-wrap属性用于指定浏览器是否可以在单词中断行，以防止当一个不可分割的字符串太长而无法放入其包含框时出现溢出。
可能的值:
normal:表示行只能在正常的字断行点处断行。 break-word:表示如果行中没有其他可接受的断点，通常不可分割的单词可以在任意点上被分割。
源。
单词分割
换行CSS属性用于指定是否在单词中换行。
normal:使用默认的换行规则。 break-all:对于非cjk(中文/日语/韩语)文本，可以在任意字符之间插入换行符。 keep-all:在CJK文本中不允许换字。非cjk文本的行为与正常文本相同。
源。
现在回到你的问题。溢位自动换行和断字之间的主要区别在于，前者决定溢位情况下的行为，而后者决定正常情况下(无溢位)的行为。当容器没有足够的空间来容纳文本时，就会发生溢出情况。在这种情况下，断行没有任何帮助，因为没有空间(想象一个具有固定宽度和高度的盒子)。
So:
overflow-wrap: break-word:在溢出的情况下，将字打散。 break-all:在正常情况下，只需要在行末断行即可。不需要溢出。
除了前面的注释之外，浏览器对换行的支持似乎比换行好一些。
overflow-wrap: break-word;
参考
overflow-wrap (MDN)
从各自的W3C规范(由于缺乏上下文，这些规范非常不清楚)可以推断出以下内容:
break-all: break-all用于将CJK(中文、日语或韩语)文字中的外来词、非CJK(即西方)词拆分。 break-word是在非混合语言(让我们说纯西方语言)中进行分词。
至少，这是W3C的意图。实际发生的是浏览器不兼容的结果。这里有一篇关于所涉及的各种问题的优秀文章。
下面的代码片段可以作为如何在跨浏览器环境中使用CSS实现换行的摘要:
-ms-word-break: break-all;
word-break: break-all;
/* Nonstandard for WebKit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
break是指一个很长的单词从它应该开始的地方开始，并且可以按要求把它拆长:
[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live
inside this narrow paragr
aph.
然而，使用换行，一个很长的单词将不会从它应该开始的地方开始。
它自动换行到下一行，然后根据需要将其断行
[X] I am a text that
012345678901234567890123
4567890123456789 want to
live inside this narrow
paragraph.
