overflow-wrap: break-word 与 word-break: break-word

Question

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>

不骗子：

Difference between overflow-wrap and word-break? - 接受的答案只是来自 MDN 的几个小引号，没有示例。老实说，我不确定发贴的人自己是否真的明白其中的区别。
Do `overflow-wrap: break-word` and `word-break: break-word` ever behave differently? - 同样，没有示例，因此很难理解真正假设的内容。

拜托，你能提供一个例子来说明它们之间的区别吗？

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

编辑

一个有趣的评论by Louis Lazaris on CSS Tricks:

overflow-wrap and word-break behave very similarly and can be used to solve similar problems. A basic summary of the difference, as explained in the CSS specification is:

overflow-wrap is generally used to avoid problems with long strings causing broken layouts due to text flowing outside a container.

word-break specifies soft wrap opportunities between letters commonly associated with languages like Chinese, Japanese, and Korean (CJK).

After describing examples of how word-break can be used in CJK content, the spec says: "To enable additional break opportunities only in the case of overflow, see overflow-wrap".

From this, we can surmise that word-break is best used with non-English content that requires specific word-breaking rules, and that might be interspersed with English content, while overflow-wrap should be used to avoid broken layouts due to long strings, regardless of the language used.

但是路易斯没有提供任何例子。我使用 work-break page by MDN:

中的以下文本执行了与上述相同的测试

Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu 次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉

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

Answer 1

~~看起来 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>

Answer 2

好的，看来我找到了答案，但我不太确定。

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

Note that the behavior of this feature—allowing breaks anywhere if the word cannot fit its container (per word-wrap/overflow-wrap: break-word) and also having these break opportunities affect the min-content size—is now specified for word-wrap/overflow-wrap: break-word. See #2682

This means that once implementations catch up, there is no use case requiring word-break: break-word to be added (since overflow-wrap: break-word now has this behavior), and the only reason to add this second syntax would be if it's needed for Web-compat.

Answer 3

不同之处在于最小内容固有大小的计算方式。 word-break:break-word but not for 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.

效果相同

overflow-wrap: break-word 与 word-break: break-word

overflow-wrap: break-word vs. word-break: break-word

html

css

word-wrap

typography

编辑