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

Question

我需要修复一些CSS，因为我的文本没有换行，而是无限地继续下去，如果它是一个非常长的单词。

像大多数情况一样，我在我的CSS文件中尝试了word-wrap: break-word;，但它没有起作用。

然后，令我惊讶的是，在Google Chrome开发者工具的建议下，我尝试了word-break: break-word;，它解决了我的问题。我对此感到震惊，所以我一直在搜索它们之间的区别，但我没有看到任何相关的内容。

此外，我认为word-break: break-word;不是文档化的行为，因为W3没有提到它。我在Safari和Chrome上进行了测试，它们在两个浏览器上都完美地工作，但我还是不敢使用word-break: break-word;，因为我没有看到任何有关它的提及。

- David

Answer 1

更新

如果您计划分隔单词并希望添加连字符，请尝试以下操作：

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

这在Chrome中也有效...某种程度上...没有连字符。 无论如何，详细的解释在这篇文章中。

word-break:break-word未被记录，只有主要开发人员知道这个超级机密技巧，就像死亡之手一样难以理解。

实际上，它是一个晦涩的-webkit-属性，类似于word-wrap: break-word，但也用于动态长度。

Kenneth.io - 使用CSS换行连字符化单词

CSS-Tricks - 单词断行

从CaniUse得知:

Chrome、Safari和其他WebKit/Blink浏览器还支持非官方的break-word值，该值被视为word-wrap: break-word。

- zer00ne

---

我明白了。我猜这个方法对我有效的原因是因为它也适用于动态长度。我需要找到一种解决办法，这样我就可以使用word-wrap: break-word;来替代。我不愿意依赖于那些在所有相关浏览器中都没有官方文档或支持的方法。 - David

如果你要分割单词，我想你也会想要加连字符。请参考我帖子中的更新。 - zer00ne