“word-break: Break-all” 和有什么不一样？与“自动换行：断字”相对在CSS中？

Question

“word-break：break-all”和“word-wrap：break-word”有什么区别？

当我使用两者时，如果它不适合容器，它们似乎会破坏这个词。但为什么 W3C 制定了两种方法来做到这一点？

Answer 1

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

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

溢出包装

overflow-wrap 属性用于指定浏览器是否可以在单词中换行，以防止当原本牢不可破的字符串太长而无法放入其包含的框中时溢出。< /p>

可能的值：

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

• break-word：表示如果行中没有其他可接受的断点，则通常不可断的单词可以在任意点处断。

来源。

断词

word-break CSS 属性用于指定是否在单词内换行。

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

来源。

---

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

因此：

• overflow-wrap:break-word：在溢出情况下，断开单词。
• word-break：break-all：正常情况下，只需将行尾的单词打断即可。溢出是不必要的。

Answer 2

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

word-wrap:break-word

实际上不会导致长字换行，这可能导致表超出其容器的边界；

word-break:break-all

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

jsfiddle 演示。

Answer 3

存在巨大差异。 break-word 只会破坏不适合容器的单词。虽然 break-all 会无情地尝试最大化每行的字符数，并会无情地导致“不必要的断字”，这看起来很可怕，但我认为。

示例

在六个字符宽的容器内以等宽字体呈现字符串 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”这样的两个字母的单词也可以分成两行。这看起来非常糟糕，我永远不会用它来渲染文本。

使用 word-wrap:break-word 只有长单词才会被破坏：

This
is a
text
from
an old
magazi
ne

break-word 的作用要好得多。它只会破坏那些永远无法适合容器宽度的单词。当前行放不下的单词将被简单地推到下一行。因此，在这种情况下，对于每行可容纳六个字符的容器，它必须被破坏
一个八个字符的单词，例如“magazine”，但它永远不会破坏像“text”这样的较短单词。

<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 4

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

自动换行

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

Word-break

此属性控制单词内的换行行为。当一个元素中使用多种语言时，它特别有用。

Answer 5

word-break：break-all：

word是继续到边界然后换行。

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 6

来自相应的 W3C 规范——由于缺乏上下文 - 可以推断出以下内容：

• word-break：break-all 用于分解外来的、非CJK（说西方）CJK（中文、日文或韩文）字符写作中的单词。
• word-wrap: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;

Answer 7

除了之前的评论之外，浏览器还支持 word -wrap 似乎比 断字。

Answer 8

word-break 和 word-wrap 的定义很容易让你头晕，但是当具体比较这两个时，更容易这样思考它们：

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

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

word-break：break-all;

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

自动换行/溢出换行：换行；

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

关于word-wrap，它并没有真正被取代（并且可能比overflow-wrap更被全世界使用的浏览器所认可）：它成为<的别名em>overflow-wrap 因为所有大型浏览器和许多网页都已经采用了word-wrap，尽管最初并未在标准中定义。

然而，由于广泛使用，它在定义overflow-wrap时并没有被丢弃，而是被定义为现在的别名，并且由于遗留原因，UA（用户代理，例如网络浏览器）必须将自动换行视为遗留overflow-wrap 属性的名称别名。因此，它已经成为 W3C 事实上的标准，并且不会很快消失（也许当 W3C 标准消失或整个网络被带有 人工智能）。

5.5。溢出换行：overflow-wrap/word-wrap 属性

溢出包裹 (MDN)

Answer 9

溢出换行：断字；

参考

overflow-wrap >（MDN）

Answer 10

CSS 中的 word-break 属性用于指定单词到达行尾时应如何断开或分割。 word-wrap 属性用于分割/分解长单词并将它们换行到下一行。

“word-break：break-all;”和“word-wrap：break-word;”之间的区别：

word-break：break-all; ：用于在任意字符处断词，防止溢出。

word-wrap：break-word;：用于在任意点处断开单词以防止溢出。

Answer 11

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

• 会将长单词换行到下一行。
• 调整不同的单词，使它们不会在中间中断。

word-break：break-all

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

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

如果不重要的话，两者都可以。

Answer 12

讨论这些的 W3 规范似乎建议分词： break-all 用于要求 CJK（中文、日文和韩文）文本具有特定行为，而 word-wrap:break-word 是更通用的、不支持 CJK 的， 行为。

Answer 13

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