CSS中的"word-break: break-all"和"word-wrap: break-word"有什么区别？

Question

"word-break: break-all"和"word-wrap: break-word"有什么区别？

当我同时使用它们时，如果单词不适合容器，它们似乎都会断开。但是为什么W3C要提供两种不同的方式呢？

- Nap

Answer 1

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

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

word-break: break-all

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

因此，如果您有许多固定大小的跨度，这些跨度会动态获取内容，您可能更喜欢使用word-wrap: break-word，因为只有连续的单词才会在其中间断开，并且如果它是由许多单词组成的句子，则会调整空格以获得完整的单词(单词内没有断点)。

如果不重要，可以选择任何一种。

- Bhumi Singhal

---

为什么这个不被接受呢？这个答案对大部分用户更有帮助。CJK行为只适用于非常国际化的网站。 - MarioDS

简短而精炼的回答！虽然您可能想将 word-wrap 更改为 overflow-wrap？ - Gaurav Agarwal

@MarioDS 这适用于“非常国际化的网站”，或者如全球20%的人称之为“网站”。 - fregante

需要注意的是，即使在最新版本中，IE仍然依赖于旧名称。请参见http://caniuse.com/#search=overflow-wrap - Felix Wienberg

“已采纳答案”符号仅与提问者相关，仅在其对答案的正确性在当时对其有意义时才相关。用户不应期望在几年后回到他们的问题并查看新的答案。 答案的投票数显示了社区“已采纳答案”。 - elpddev

Answer 2

W3规范相关内容表明，word-break: break-all主要用于CJK（中文、日文和韩文）文本的特定处理，而word-wrap: break-word则是更一般、不针对CJK文本的处理。

- AakashM

---

请注意，"word-wrap" 是规范中较新属性 "overflow-wrap" 的旧称。请参考 http://www.w3.org/TR/css3-text/#overflow-wrap。 - squareman

简单来说，word-break 属性指定字母之间的软换行机会... W3C 规范使用 CLK 文本作为示例，但这并不是它唯一的预期用途。当你希望长字符串（例如 URL 或代码行）在容器宽度处换行时，通常与 word-wrap 属性一起使用 word-break 属性，特别是当容器是 pre 元素或表格单元格时，word-wrap 属性可能无法按预期工作。 - gfullam

因为规范仅将亚洲语言作为示例，而不是属性的唯一预期用途（正如gfullam所描述的那样），尽管这似乎是本答案的主要结论。 - Shikkediel

自动换行：break-word → 不会打断表格 ---- 单词换行：break-all → 可以打断表格 - Fernando Silva

实际上，定义说，___"word-break属性指定非CJK脚本的断行规则。"___ "CJK脚本是中文、日文和韩文（“CJK”）脚本。" - Qwerty

请注意，@squareman提到的W3C链接现在是https://www.w3.org/TR/css-text-3/#overflow-wrap-property。 - Charles Wood

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.

- shuky

---

如果使用 break-word，这种情况仍然存在吗？我很烦恼地发现 word-break 会打断 URL，但 word-wrap 却不会。两者都使用 break-word，可以从 http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ 中获取。 - Karthik T

Answer 4

word-wrap 已经更名为 overflow-wrap，可能是为了避免混淆。

现在我们有:

overflow-wrap

overflow-wrap 属性用于指定浏览器是否可以在单词内部换行，以防止当一个无法被分割的字符串过长而无法适应其所在的容器时发生溢出。

可选值：

• normal: 表示只能在单词正常断点处进行断行。

• break-word: 如果没有其他可接受的断点，表示通常不可分割的单词可以在任意点断开。

来源。

word-break

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

• normal: 使用默认的换行规则。
• break-all: 对于非CJK(中文/日语/韩语)文本，可以在任何字符之间插入单词断点。
• keep-all: 不允许对CJK文本进行单词断点。 非CJK文本的行为与正常情况相同。

来源。

---

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

所以：

- overflow-wrap: break-word：在溢出情况下，断开单词。 - word-break: break-all：在正常情况下，只需在行末断开单词。不需要溢出。

- Andre Pena

---

解释得很好。我刚遇到一个例子：表格单元格中的长单词。 overflow-wrap / word-wrap 无法使它们换行。可能是因为没有固定宽度的表格单元格会扩展而不是溢出。相反，表格变宽并与其他元素碰撞。另一方面，word-break修复了这个问题。 - Henrik N

@HenrikN table-layout: fixed;（可能与width/max-width一起使用）可以使其与overflow-wrap/word-wrap配合使用，但这取决于具体的用例；就像word-break可能不是您想要的那样。 - phk

Answer 5

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

word-wrap:break-word

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

word-break:break-all

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

jsfiddle 示例。

- Jon Schneider

---

дЅїз”Ёtable-layout:fixed可以使表格在使用word-wrap:break-work时不会被扩展。 - veksen

@vesken 我无法让它在Firefox 26中工作。你能否提供一个更新的版本，以演示你的意思？ - Jon Schneider

通过在表格上添加宽度，可以让它工作，可以设置为100％或将容器的80px宽度移动到表格上。 http://jsfiddle.net/SDGAX/37/ 但是，使用 table-layout:fixed 属性时，表格行为不同。 - veksen

除非在Firefox中定义了固定宽度，否则在使用pre标签与word-wrap结合时也会出现此行为。使用word-break可以产生所需的结果。我在上面发布的评论中链接到了这个答案，因为它展示了一个常见的用例。 - gfullam

同时，没有宽度的display-inline元素不会受到“word-wrap”的影响，但“word-break”仍然有效。 - tfE

Answer 6

有一个很大的区别。break-word只会在单词太长无法适应容器时才会断开。而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”这样的两个字母也可能被分成两行。这样看起来非常糟糕，我不会用它来渲染文本。

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

- Drkawashima

Answer 7

这是我能找到的所有信息。不确定是否有帮助，但我想把它添加进来。

Word-wrap（自动换行）

该属性指定当前呈现行是否应在内容超出元素指定渲染框边界时换行（在某些方面类似于“裁剪”和“溢出”属性）。此属性仅适用于具有视觉呈现、具有显式高度/宽度的内联元素、绝对定位和/或块级元素。

Word-break（单词内断字）

该属性控制单词内的换行行为。在使用多种语言的元素中特别有用。

- Jonny Haynes

---

谢谢，我正在寻找word-wrap与word-break之间的区别，它们都可以取break-word的值。 - Chad

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>

- Ehsan

Answer 9

从各自的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;

- Serge Stroobandt

Answer 10

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

- user2619604

---

评论？你是指答案吗？ - Peter Mortensen

好的，OP已经离开了："上次出现已经超过8年了"。 - Peter Mortensen