溢出换行：断字与断字：断字

编程问答 2022-05-17

问题描述

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 的别名。我的问题与此无关。

编辑

有趣的评论by Louis Lazaris on CSS Tricks：

overflow-wrap 和 word-break 的行为非常相似，可以用来解决类似的问题。 CSS 规范中解释的差异的基本摘要是：

  • overflow-wrap 通常用于避免由于文本流到容器外而导致布局损坏的长字符串问题。
  • word-break 指定通常与中文、日语和韩语 (CJK) 等语言相关联的字母之间的软换行机会。

在描述了如何在 CJK 内容中使用 word-break 的示例之后，规范说：“要仅在溢出的情况下启用额外的中断机会，请参阅溢出包装”。

由此我们可以推测，word-break 最好用于需要特定断字规则的非英文内容，并且可能穿插英文内容，而 overflow-wrap 应该用于无论使用何种语言，都可以避免由于长字符串而导致布局损坏。

但路易斯没有提供任何例子。我使用 work-break page by MDN 中的以下文本执行了与上述相同的测试：

Honorificabilitudinitatibus califragilisticexpialidocIoUs Taumatawhakatangihangakoauauotamateaturipukakapikimaungaungahoronukupokaiwhenuakitanatahu 次の単语グレートブリテンおよび北アルランド连合当王国p

... overflow-wrap: break-word 和 word-break: break-word 之间仍然没有区别。

解决方法

不同之处在于计算最小内容固有大小的方式。 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 的效果相同。

,

看起来 const array = [-9,-8,-5,-3,-2,2,7]; const newArray = new Array(array.length); let i = 0,j = array.length - 1,l = array.length - 1; while(i <= j) { const first = Math.abs(array[i]); const last = Math.abs(array[j]); if(first > last){ newArray[l] = first; i++; } else { newArray[l] = last; j--; } l--; } console.log(newArray) 为文本换行提供了更多机会。

我修改了您的代码以一个接一个地显示两种情况，以便于比较。

编辑：很好地抓住了丢失的 overflow-wrap - 在修复之后我同意似乎没有区别。

我将这个答案留在这里，因为它仍然是测试替代方案的好代码示例。

{
body {
  width: 300px;
}

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

.break-2 {
  word-break: break-word;
}

,

好的，我似乎找到了答案，但我不确定。

根据 comment at GitHub，似乎 overflow-wrap: break-word 现在可以捕获 word-break: break-word 的所有情况，因此后者是多余的，除非用于向后兼容。

请注意，此功能的行为 - 如果单词无法容纳其容器（每个 word-wrap/overflow-wrap: break-word）并且这些中断机会会影响最小内容大小，则允许在任何地方中断 - 现在是指定用于自动换行/溢出换行：断字。见#2682

这意味着一旦实现迎头赶上，就没有用例需要添加 word-break: break-word （因为 overflow-wrap: break-word 现在有这个行为），也是添加第二个的唯一原因如果 Web 兼容需要它，则语法将是。

htmltypographyword-wrap