我目前想知道两者之间有什么区别。当我使用它们时，如果它不适合容器，它们似乎打破了这个词。但为什么W3C有两种方法呢？
The W3 specification that talks about these似乎暗示word-break: break-all用于要求CJK（中文，日文和韩文）文本的特定行为，而word-wrap: break-word是更普遍的，非CJK意识的行为。
渲染有很大的不同。
假设你在容器中有字符串This is a text from an old magazine，每行只能容纳6个字符。
word-break: break-all输出：
This i
s a te
xt fro
m an o
ld mag
azine
break-all将尽可能多地填充每行字符。因此它会导致一个非常可怕的结果，因为像“is”这样的单词被分成2行，如果它只是被推到新行就可以很好。“这就是为什么我很少使用break-all。
word-wrap: break-word输出：
This
is a
text
from
an old
magazi
ne
break-word只会破坏太长而不适合容器的单词（如“杂志”，即8个字符，容器只能容纳6个字符）。它永远不会破坏可以完全适合容器的单词，而是将它们推向一个新的行。
<div style="width: 100px; border: solid 1px black; font-family: monospace;">
<h1 style="word-break: break-all;">This is a text from an old magazine</h1>
<hr>
<h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</divword-wrap: break-word最近改为overflow-wrap: break-word
word-break: break-all
因此，如果您有许多固定大小的跨度来动态获取内容，您可能只是更喜欢使用word-wrap: break-word，因为只有连续的单词在它们之间被打破，并且如果它是包含许多单词的句子，则空格被调整为完整单词（一个词内没有中断）。
如果没关系，那就去吧。
使用word-break，一个非常长的词开始于它应该开始的点，并且只要需要它就会被打破
[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live
inside this narrow paragr
aph.
然而，对于word-wrap，一个很长的词不会从它应该开始的那一刻开始。它包裹到下一行，然后在需要时被打破
[X] I am a text that
012345678901234567890123
4567890123456789 want to
live inside this narrow
paragraph.
至少在Firefox（从v24开始）和Chrome（从v30开始），当应用于table元素中的内容时：
word-wrap:break-word
实际上不会导致长词包装，这可能导致表超出其容器的界限;
word-break:break-all
将导致单词换行，并且表格适合其容器。
word-wrap已经更名为overflow-wrap可能是为了避免这种混乱。
现在这就是我们所拥有的：
overflow-wrap属性用于指定浏览器是否可以在单词中断行，以防止在其他不可破解的字符串太长而无法容纳其包含框时溢出。
可能的值：
word-break CSS属性用于指定是否在单词中断行。
现在回到你的问题，overflow-wrap和word-break之间的主要区别在于，第一个确定溢出情况下的行为，而后者确定正常情况下的行为（无溢出）。当容器没有足够的空间来容纳文本时，会发生溢出情况。在这种情况下断线并没有帮助，因为没有空间（想象一个具有固定宽度和高度的盒子）。
所以：
overflow-wrap: break-word：在溢出的情况下，打破这些话。word-break: break-all：在正常情况下，只需打破行尾的单词。不需要溢出。这是我能找到的全部。不确定它是否有帮助，但我想我会把它添加到混合中。
WORD-WRAP
此属性指定当内容超出元素的指定呈现框的边界时当前呈现的行是否应该中断（这在某些方面类似于intent中的'clip'和'overflow'属性。）此属性应仅适用如果元素具有可视化渲染，则是具有显式高度/宽度的内联元素，绝对定位和/或是块元素。
WORD-BREAK
此属性控制单词中的换行行为。在元素中使用多种语言的情况下，它尤其有用。
word-break:break-all：
单词继续边界然后在换行符中断。
word-wrap:break-word：
首先，换行中的自动换行然后继续边界。
示例：
div {
border: 1px solid red;
width: 200px;
}
span {
background-color: yellow;
}
.break-all {
word-break:break-all;
}
.break-word {
word-wrap:break-word;
}<b>word-break:break-all</b>
<div class="break-all">
This text is styled with
<span>soooooooooooooooooooooooooome</span> of the text
formatting properties.
</div>
<b> word-wrap:break-word</b>
<div class="break-word">
This text is styled with
<span>soooooooooooooooooooooooooome</span> of the text
formatting properties.
</div>从相应的W3 specifications - 由于缺乏上下文而恰好不清楚 - 可以推断出以下内容：
word-break: break-all用于打破CJK（中文，日文或韩文）角色作品中的外国非CJK（比如西方）词。word-wrap: break-word用于非混合（简称西方语言）语言。至少，这些是W3的意图。实际发生的事情是导致浏览器不兼容的主要蠢事。这是an excellent write-up of the various problems involved。
以下代码段可以作为如何在跨浏览器环境中使用CSS实现自动换行的摘要：
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
除了之前的评论，浏览器对word-wrap的支持似乎比word-break好一点。