这是一个巨大的区别。break-word只会破坏不符合容器的单词。而break-all会无情地试图最大限度地增加每行字符的数量，并会无情地导致“不必要的断句”，这看起来很可怕。

例子

这是一个来自旧杂志的文本，在一个6个字符宽的容器中使用单行字体。

使用word-break: break-all，大多数单词都被打破了，看起来无法阅读:

This i
s a te
xt fro
m an o
ld mag
azine

break-all所做的是一行一行地进行，在每行上放入六个字符，直到没有剩余。它会无情地这样做，即使是像“is”这样的两个字母的单词也可以分成两行。这看起来非常糟糕，我永远不会用它来渲染文本。

使用word-wrap: break-word，只有长单词会被打断:

This
is a
text
from
an old
magazi
ne

break-word的功能要好得多。它只会破坏无法装下容器宽度的单词。不能放入当前行的单词会被推到下一行。因此，在这种情况下，对于每行容纳6个字符的容器，它必须断开 一个8个字符的单词，比如“magazine”，但它永远不会变成一个更短的单词，比如“text”。

< span style="width: 10px;边框:纯黑色1px;字体类型:等宽字体;" > <h1 style=" font - family:宋体;"这是一本旧杂志上的一段文字 <人力资源> <h1 style=" font - family:宋体;"这是一本旧杂志上的一段文字 < / div

CSS中的分词属性用于指定当一个单词到达一行末尾时应该如何分词或分词。换行属性用于拆分/换行较长的单词并将它们换行到下一行。

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

word-break: break-all;:用于在任意字符处进行换行，防止字符溢出。

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

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.

除了前面的注释之外，浏览器对换行的支持似乎比换行好一些。

这是一个巨大的区别。break-word只会破坏不符合容器的单词。而break-all会无情地试图最大限度地增加每行字符的数量，并会无情地导致“不必要的断句”，这看起来很可怕。

例子

这是一个来自旧杂志的文本，在一个6个字符宽的容器中使用单行字体。

使用word-break: break-all，大多数单词都被打破了，看起来无法阅读:

This i
s a te
xt fro
m an o
ld mag
azine

break-all所做的是一行一行地进行，在每行上放入六个字符，直到没有剩余。它会无情地这样做，即使是像“is”这样的两个字母的单词也可以分成两行。这看起来非常糟糕，我永远不会用它来渲染文本。

使用word-wrap: break-word，只有长单词会被打断:

This
is a
text
from
an old
magazi
ne

break-word的功能要好得多。它只会破坏无法装下容器宽度的单词。不能放入当前行的单词会被推到下一行。因此，在这种情况下，对于每行容纳6个字符的容器，它必须断开 一个8个字符的单词，比如“magazine”，但它永远不会变成一个更短的单词，比如“text”。

< span style="width: 10px;边框:纯黑色1px;字体类型:等宽字体;" > <h1 style=" font - family:宋体;"这是一本旧杂志上的一段文字 <人力资源> <h1 style=" font - family:宋体;"这是一本旧杂志上的一段文字 < / div

overflow-wrap: break-word;

参考

overflow-wrap (MDN)