logo标签列表

overflow-wrap: break-word 与 word-break: break-word 的区别

htmlcssword-wraptypography
8

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

从下面的示例中可以看出，选项1和选项2之间没有视觉上的区别。（您需要取消注释其中之一。）

body {
  width: 300px;
}

.dont-break-out {
  /* Option 1 */
  /* overflow-wrap: break-word; */ 
  /* Option 2 */
  /* word-break: break-word; */
}
<p class="dont-break-out" lang="en-US">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>

<p class="dont-break-out" lang="en-US">According to Wikipedia, The longest word in any of the major English language dictionary is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.</p>

非副本:

请问，能提供一个示例来展示它们之间的区别吗？

是的，我知道word-wrap是overflow-wrap的别名。我的问题不是关于这个的。

编辑

CSS Tricks上Louis Lazaris的有趣评论：

overflow-wrap 和 word-break 行为非常相似，可以用来解决类似的问题。CSS 规范中解释了它们之间的基本区别：

  • overflow-wrap 通常用于避免长字符串导致文本溢出容器而破坏布局的问题。
  • word-break 指定了在中文、日文和韩文（CJK）等语言中常见的字母之间的软换行机会。

在描述了 word-break 如何在 CJK 内容中使用的示例之后，规范说：“要仅在溢出时启用其他断点，请参见 overflow-wrap”。

由此我们可以推断出，word-break 最适合用于需要特定断词规则的非英文内容，并且可能与英文内容交错，而 overflow-wrap 应该用于避免因字符串过长而导致的破碎布局问题，无论使用的是哪种语言。

但是路易斯没有提供任何示例。我使用来自MDN work-break页面 的以下文本执行了与上面相同的测试：

Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu这个单词在大不列颠及北爱尔兰联合王国真的是一个很长的词

...仍然没有区别 overflow-wrap: break-word 和 word-break: break-word 之间。
3个回答
4
两者的区别在于计算最小内容本质大小的方式不同。对于 word-break:break-word，断行引入的软换行机会被考虑在内，但对于overflow-wrap:break-word则不是这样。因此，为了说明它们之间的区别，我们需要选择根据最小内容本质大小调整大小的内容，例如浮动元素： 

body {
  width:160px;
}
p {
   float:left;
   border:1px solid;
}

.overflow-wrap {
   overflow-wrap: break-word;
}

.word-break {
   word-break: break-word;
}
<p>A popular long word in Engish is 
  <i class="overflow-wrap">antidisestablishmentarianism</i>,
  although longer more contrived words exist</p>
<p>A popular long word in Engish is 
  <i class="word-break">antidisestablishmentarianism</i>,
  although longer more contrived words exist</p>

word-break:break-word 的效果与 overflow-wrap:anywhere 相同。

2

看起来overflow-wrap提供了更多的机会使文本换行。

我修改了你的代码，以便更容易地进行比较。

编辑：很好地发现了缺少的{ - 在修复后，我同意似乎没有区别。

我将保留此答案，因为它仍然是测试替代方案的良好代码示例。

body {
  width: 300px;
}

.break-1 {
  overflow-wrap: break-word;
}

.break-2 {
  word-break: break-word;
}
<p class="break-1" lang="en-US">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>

<p class="break-2" lang="en-US">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>

<p class="break-1" lang="en-US">According to Wikipedia, The longest word in any of the major English language dictionary is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.</p>

<p class="break-2" lang="en-US">According to Wikipedia, The longest word in any of the major English language dictionary is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.</p>

<p class="break-1">Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>

<p class="break-2">Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉</p>

糟糕。我已经为你的答案点赞了，但似乎还太早了 :) 实际上，在 break-2 中缺少 {。如果你添加这个 {}，就不会有任何区别了。 - john c. j.
0

好的，看起来我已经找到了答案，但我不是很确定。

根据GitHub上的评论">GitHub上的评论，overflow-wrap: break-word似乎现在捕获了所有word-break: break-word的情况，因此后者除非用于向后兼容，否则是多余的。
请注意，这个特性的行为——如果单词无法放入其容器，则允许在任何地方断开（根据word-wrap/overflow-wrap：break-word），并且这些断开点会影响最小内容大小——现在已经针对word-wrap/overflow-wrap：break-word进行了规定。请参见#2682
这意味着一旦实现赶上来，就没有使用情况需要添加word-break: break-word（因为overflow-wrap：break-word现在具有此行为），而添加第二个语法的唯一原因是如果需要Web-compat。
1
Fantasai在2018年9月16日恢复了规范中的更改，使两者相同（链接：https://github.com/w3c/csswg-drafts/issues/2951#event-1848014624），因为这不兼容Web。 - Alohci
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接