CSS中“word-break：break-all”与“word-wrap：break-word”之间的区别是什么？

Question

我目前想知道两者之间有什么区别。当我使用它们时，如果它不适合容器，它们似乎打破了这个词。但为什么W3C有两种方法呢？

Answer 1

word-wrap: break-word最近更改为overflow-wrap: break-word

• 会将长字包装在下一行。
• 调整不同的单词，使它们不会在中间断开。

word-break: break-all

• 无论是连续的单词还是多个单词，都会在宽度限制的边缘将它们分开。 （即使在同一个词的字符内）

因此，如果您有许多固定大小的跨度来动态获取内容，您可能只是更喜欢使用word-wrap: break-word，因为只有连续的单词在它们之间被打破，并且如果它是包含许多单词的句子，调整空格以获得完整的单词（单词中没有中断）。

如果没关系，请选择其中一个。

Answer 2

The W3 specification that talks about these似乎暗示word-break: break-all用于要求CJK（中文，日文和韩文）文本的特定行为，而word-wrap: break-word是更通用的非CJK-意识到，行为。

Answer 3

使用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.

Answer 4

至少在Firefox（自v24起）和Chrome（截至第30版）时，应用于table元素中的内容时：

word-wrap:break-word

实际上不会导致长词包装，这可能导致表超出其容器的范围;

word-break:break-all

将导致单词换行，并且表格适合其容器。

jsfiddle demo

Answer 5

word-wrap已重命名为overflow-wrap，可能是为了避免这种混淆。

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

溢出缠绕

  

overflow-wrap 属性用于指定浏览器是否可以在单词中断行，以防止在其他不可破坏的字符串太长而无法容纳其包含框时溢出。< / p>

可能的值：

• 正常：表示行只能在正常的分词点处中断。

• break-word ：表示如果行中没有其他可接受的断点，通常不可破坏的单词可能会在任意点被破坏。

source

字断

  

分词 CSS属性用于指定是否在单词中断行。

• 正常：使用默认换行符规则。
• break-all ：可以在非CJK（中文/日文/韩文）文字的任何字符之间插入分词符。
• keep-all ：不允许CJK文字的分词。非CJK文本行为与普通行为相同。

source

现在回到你的问题， overflow-wrap 和 word-break 之间的主要区别在于，第一个确定溢出情况，而后者确定正常情况下的行为（无溢出）。当容器没有足够的空间来容纳文本时，会发生溢出情况。在这种情况下断线没有帮助，因为没有空间（想象一个具有固定宽度和高度的盒子）。

所以：

• overflow-wrap: break-word：在溢出的情况下，打破这些话。
• word-break: break-all：在正常情况下，只需打破行尾的单词即可。不需要溢出。

Answer 6

这是我能找到的全部内容。不确定它是否有帮助，但我想我会把它添加到混合中。

字符-WRAP

此属性指定当内容超出元素的指定渲染框的边界时，当前渲染线是否应该中断（这在某些方面类似于intent中的'clip'和'overflow'属性。）此属性应该仅在元素具有可视化渲染时应用，是具有显式高度/宽度的内联元素，绝对定位和/或是块元素。

字符-BREAK

此属性控制单词中的换行行为。在元素中使用多种语言的情况下，它尤其有用。

Answer 7

从相应的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;

Answer 8

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>

Answer 9

除了之前的评论，浏览器对word-wrap的支持似乎比word-break更好。

Answer 10

渲染方面存在巨大差异。

假设您在一个仅容纳每行6个字符的容器中包含字符串This is a text from an old magazine。

word-break: break-all

输出：

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

break-all将在每行中尽可能多地容纳字符。因此，这将导致非常糟糕的结果，因为“ is”之类的单词被分成两行，如果仅将其压入换行符就可以很好地适应它。”这就是为什么我很少使用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

Answer 11

单独的 word-break 和 word-wrap 的定义很容易让你头晕目眩，但是当比较这两者时，具体来说，更容易想到它们：

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

然后请记住，在这种情况下，“单词”是一个没有空格的字符串。

断字：断断续续； 在保持任何单词完整之前，优先减少浪费的空间，同时避免溢出，因此除了在右边距外，它永远不会在任何地方换行。它甚至用包含文本中的空格替换换行符。如果您想尽可能避免滚动并使用足够宽以提高可读性的容器，这很有用：但是，正如 Drkawashima 指出的那样，如果您的容器太窄，结果通常不太令人满意。

word-wrap/overflow-wrap: 断字； 优先保持任何和所有单词完整，同时避免溢出，因此如果一个单词太长而无法放在行的其余部分，它会首先换行并尝试将其余文本放在下一行，即使这意味着离开该行以上短至只有一个字符。如果您希望获得最大的可读性，同时尽可能避免滚动并使用足够宽的容器，这将非常有用：否则您可能只想使用 overflow: auto 来代替。

关于自动换行，它并没有真正被取代（而且可能比世界范围内使用的浏览器更普遍地认可溢出包装）：它成为溢出包装的别名，因为所有大型浏览器和许多网页虽然最初没有在标准中定义，但已经采用了自动换行。然而，由于广泛使用它在定义溢出包装时并没有被丢弃，而是被定义为今天的别名，并且由于遗留原因，UA（用户代理，例如网络浏览器）必须将自动换行视为溢出包装属性的旧名称别名。因此，它已成为 W3C 的事实上的标准，并且不会很快消失（也许当 W3C 标准消失或整个网络都被具有 AI 的机器人普遍更新时）。

https://www.w3.org/TR/css-text-3/#overflow-wrap-property

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

Answer 12

overflow-wrap: break-word;

参考

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap