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

Question

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

\n

正如您从以下示例中看到的，选项 1 和选项 2 之间没有视觉差异。（您需要取消注释其中之一。）

\n

\r\n

\r\n

body {\n  width: 300px;\n}\n\n.dont-break-out {\n  /* Option 1 */\n  /* overflow-wrap: break-word; */ \n  /* Option 2 */\n  /* word-break: break-word; */\n}

\r\n

<p class="dont-break-out" lang="en-US">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>\n\n<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>

\r\n

\r\n

\r\n

\n

不是骗子：

\n

\n

• 溢出换行和断字之间的区别？- 接受的答案只是来自 MDN 的一些小引用，并且没有示例。说实话，我不确定发帖的人自己是否真的理解其中的区别。

  \n
\n

• `overflow-wrap:break-word` 和 `word-break:break-word` 的行为是否有所不同？- 再说一次，没有例子，所以很难理解真正的假设是什么。

  \n
\n

\n

请问您能举个例子来说明它们之间的区别吗？

\n

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

\n

编辑

\n

Louis Lazaris 对 CSS Tricks 的有趣评论：

\n

\n

overflow-wrap并且word-break行为非常相似，可以用来解决类似的问题。正如 CSS 规范中所解释的，差异的基本总结是：

\n

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

\n

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

\n

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

\n

\n

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

\n

\n

Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu \xe6\xac\xa1\xe3\x81\xae\xe5\x8d\x98\xe8\xaa\x9e\xe3\x82\xb0\xe3\x83\xac\xe3 \x83\xbc\xe3\x83\ x88\xe3\x83\x96\xe3\x83\xaa\xe3\x83\x86\xe3\x83\xb3\xe3\x81\x8a\xe3\x82\x88\xe3\x81\xb3\xe5\x8c\x97\ xe3\x82\xa2\xe3\x82\xa4\xe3\x83\xab\xe3\x83\xa9\xe3\x83\xb3\xe3\x83\x89\xe9\x80\xa3\xe5\x90\x88\xe7\ x8e\x8b\xe5\x9b\xbd\xe3\x81\xa7\xe6\x9c\xac\xe5\xbd\x93\xe3\x81\xab\xe5\xa4\xa7\xe3\x81\x8d\xe3\x81\ xaa\xe8\xa8\x80\xe8\x91\x89

\n

\n

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

\n

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。