html - 溢出换行 : break-word vs. 断字:断字

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

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