溢出换行和单词断裂之间的区别是什么？

Question

溢出换行和单词断裂之间的区别是什么？

139

overflow-wrap/word-wrap和word-break的确切区别是什么？有没有人能告诉我哪一个更适合打破非常长的链接？大多数人说你应该结合使用overflow-wrap和word-break，但这看起来不太合理。我认为使用overflow-wrap结合word-wrap以获得更好的跨浏览器支持是最好的方法。你怎么看？

- Anselm

7

对于可能一开始会因为这个问题被关闭作为重复问题而感到困惑的未来读者们，CSS文本模块第三级表明“overflow-wrap”和“word-wrap”在功能上应该完全相同。从个人角度来看，“word-wrap”应该只用于支持旧版浏览器，并且它可能会在CSS的未来版本中被弃用或移除。 - Tyler Crompton

40

对于投票关闭此问题的人：这不是一个重复的问题，正如所述，这个问题并不相同。所谓的重复问题是关于两个特定属性值的，而这个问题是关于这两个属性本身的。我真的很讨厌有些人认为自己有权禁止别人回答问题。如果你不喜欢一个问题，就不要阅读它！ - Hibou57

5

你正在混淆word-wrap和word-break。 - catamphetamine

4

我同意Hibou57的观点。这不是重复的问题。很遗憾它已经关闭了，因为很难在网上找到答案。 - Paul-Hebert

1

@TylerCrompton 这个问题与word-wrap无关，而是关于word-break。将其关闭为重复问题是没有意义的。 - Lone Learner

显示剩余3条评论

5个回答

41

在此时，理解word-break: break-word实际上是overflow-wrap: anywhere的别名是有帮助的。word-break: break-word已经正式弃用，可以参考CSS Text Module Level 3 Working Draft：

“为了兼容与旧内容，word-break属性还支持废弃的break-word关键字。当指定时，无论overflow-wrap属性的实际值如何，都会产生与word-break: normal和overflow-wrap: anywhere相同的效果。”

需要注意的是，word-break: break-word是overflow-wrap: anywhere的别名，而不是overflow-wrap: break-word的别名。

（word-break: normal只是word-break的默认值，因此您可以忽略它，除非您要为word-break设置不同的值。）

那么overflow-wrap: anywhere和overflow-wrap: break-word有什么区别呢？

两者之间文档中唯一的区别是，overflow-wrap: anywhere在“计算最小内容内在大小”时考虑了单词断点引入的软换行机会，而overflow-wrap: break-word则没有考虑。

我猜如果计算它们，宽度在某些情况下可能更准确？

- Ben Wheeler

22

以下是具体区别：（基于在Chrome v81中进行的测试，并通过参考规范证实了我的观察结果）

white-space：

normal（默认）：折叠空白链和换行符；在需要时添加换行符
nowrap：折叠空白链和换行符；不添加换行符
pre-line：折叠空白链；在需要时添加换行符
pre-wrap：不折叠；在需要时添加换行符
break-spaces：与 pre-wrap 相同，但空格可以触发添加换行符
pre：不折叠；不添加换行符

注意：如果所选 white-space 值列出了“不添加换行符”，则无法应用以下属性的换行行为（即被忽略）。

word-break：

normal（默认）：在容器内最后一个适合的单词处断开一行（如果存在），否则保持未断
break-word：在容器内最后一个适合的单词处断开一行（如果存在），否则在容器末尾断开
break-all：在容器末尾断开一行（即使有相邻的空白符也可以分割单词）

overflow-wrap（旧名：word-wrap）：

normal（默认）：在容器内最后一个适合的单词处断开一行（如果存在），否则保持未断break-word:在容器内适合的最后一个单词结束时断开行[如果存在]，否则在容器的末尾断开行[如果在非弹性容器中]，否则留下未被断开的行。
anywhere: 在容器内适合的最后一个单词结束时断开行[如果存在]，否则在容器的末尾断开行[因此与 word-break: break-word 相同]。

请注意，在使用overflow-wrap: break-word（以及任何导致行超出容器的组合）时，未断开的行可能会导致弹性容器扩展超出指定的弹性比率（迫使其他弹性容器缩小以解决过长的内容）。

- Venryx

基于你所说的“基于文档”，我假设这个内容大部分是从其他地方复制过来的？通常情况下，SO不赞成纯粹复制其他地方的内容，但无论如何，当你复制内容时，必须引用来源以避免抄袭。此外，在Chrome中进行测试并不能可靠地证明某些东西是否符合规范要求。 - TylerH

3

@TylerH 这并不是（甚至远非）其他地方内容的简单复制。大部分行为描述来自我在 Chrome 中进行的直接测试，参考文档页面只是用来确认我观察到的行为是否符合规范，并确保我没有漏掉其他行为。与剽窃相差甚远。（我将更新顶部注释以澄清此事） - Venryx

2

对于真正想要全面理解的认真、耐心的读者来说，这是最好的答案。非常感谢。 - ZYinMD

5

overflow-wrap 强调如何处理溢出，word-break 强调如何分隔单词。

- weiya ou

1

我尝试了所有的值以更好地理解它们如何影响最终结果，这是我得到的：

overflow-wrap（例如word-wrap）：

/*Set dimensions*/
div {
  height: 200px;
  width: min-content;
  max-width: 9em;
}

/*Set overflow-wrap*/
div#normal { overflow-wrap:normal; }
div#break-word { overflow-wrap:break-word; }
div#anywhere { overflow-wrap:anywhere; }
div#anywhere-wo-mincontent { overflow-wrap:anywhere; width: unset; }

/*Set other*/
body { display: flex; }
div { border: 1px solid; display: inline-block; margin: 30px; }
code { text-decoration: underline; }

  <div id=normal><code>overflow-wrap:normal</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
  <div id=break-word><code>overflow-wrap:break-word</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
  <div id=anywhere><code>overflow-wrap:anywhere</code><br>Most words are short. But Antidisestablishmentarianism is long.
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
  <div id=anywhere-wo-mincontent><code>overflow-wrap:anywhere</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>

word-break：

/*Set dimensions*/
div {
  height: 200px;
  width: min-content;
  max-width: 9em;
}

/*Set overflow-wrap*/
div#normal { word-break:normal; }
div#break-all { word-break: break-all; }
div#break-all-wo-mincont { word-break: break-all; width: unset; }
div#keep-all { word-break: keep-all; }
div#break-word { word-break: break-word; }
div#break-word-wo-mincont { word-break: break-word; width: unset; }

/*Set other*/
body { display: flex; }
div { border: 1px solid; display: inline-block; margin: 30px; }
code { text-decoration: underline; }

  <div id=normal><code>word-break:normal</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
  <div id=break-all><code>word-break:break-all</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
  <div id=break-all-wo-mincont><code>word-break:break-all</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
  <div id=keep-all><code>word-break:keep-all</code><br>Most words are short. But Antidisestablishmentarianism is long.
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
  <div id=break-word><code>word-break:break-word</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>
  <div id=break-word-wo-mincont><code>word-break:break-word</code><br>Most words are short & don't need to break. But Antidisestablishmentarianism is long.
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉</div>

结果：

我自己注意到：

word-break: break-all
是最紧凑的选项，但你必须小心，因为它取决于width: min-content;
word-break: keep-all
是唯一可以将cjk文本（以及其他字母）保持在同一行的选项。几乎像: normal;但适用于cjk。
overflow-wrap: break-word
在极少数情况下，当word-break: break-all不合适时，例如Opera Mini，可以使用它。

其他：

overflow-wrap: anywhere
我认为这个属性并没有实际用途。同时它还依赖于width: min-content;
word-break: break-word
已过时，同时它还依赖于width: min-content;
overflow-wrap: normal和word-break: normal
初始值（默认值）

caniuse.com上的浏览器支持比较（2023年01月24日）：

- kirogasa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- karthikr · Accepted Answer

摘自来源

overflow-wrap：overflow-wrap CSS 属性用于指定在包含框无法容纳否则不可分割的字符串时，浏览器是否可以在单词内部断开行以防止溢出。
word-wrap：CSS3 中的 word-wrap 属性已更名为 overflow-wrap。
word-break：word-break CSS 属性用于指定如何（或是否）在单词内部断开行。

因此，您需要将 word-break 与 word-wrap 结合使用，这是正确的组合。