我目前想知道两者之间有什么区别。当我使用两者时，如果它不适合容器，它们似乎会打乱这个词。但是，为什么W3C有两种方法可以做到这一点？

讨论这些的W3规范似乎暗示word-break: break-all要求CJK（中文，日文和韩文）文本具有特定的行为，而这word-wrap: break-word是更普遍的，不支持CJK的行为。

word-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.

word-wrap已被重命名以overflow-wrap避免这种混乱。

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

溢出包装

所述溢流缠绕属性用来指定浏览器是否可能破裂字线内，以防止溢出当否则牢不可破字符串太长，以适应其容纳箱。

可能的值：

• normal：指示行只能在正常的断点处断开。

• break-word：指示如果行中没有其他可接受的断点，则通常在任何点都不会破坏坚不可摧的单词。

来源。

断字

该字断 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演示。

这就是我能找到的全部。不确定是否有帮助，但以为我会将其添加到组合中。

换行

此属性指定如果内容超出元素的指定渲染框的边界，则当前渲染的行是否应中断（在某些方面类似于intent的“ clip”和“ overflow”属性。）此属性仅应适用如果元素具有视觉效果，则是具有明确的高度/宽度的内联元素，是绝对定位的元素，和/或是块元素。

单词中断

此属性控制单词内的换行行为。在元素内使用多种语言的情况下，此功能特别有用。

有很大的不同。break-all基本上无法用于呈现可读文本。

假设您将字符串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只会破坏太长而无法容纳容器的单词（例如“ magazine”，即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>
</div

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规范（由于缺乏上下文而变得非常不清楚），可以得出以下结论：

• word-break: break-all 用于分解CJK（中文，日文或韩文）字符文字中的外国非CJK（例如西方）单词。
• word-wrap: break-word 用于非混合语言（让我们仅说西语）中的断词。

至少，这些是W3的意图。实际发生的结果是浏览器不兼容的一个重大问题。这是有关各种问题的出色文章。

以下代码段可作为如何在跨浏览器环境中使用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。