html - word-wrap : break-word and 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; 犹豫不决，因为我在任何地方都没有看到它。

Answer 1

更新

如果您打算打断单词并且还想连字符，请尝试以下操作:

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

这甚至在 Chrome 中也有效……有点……没有连字符。无论如何，这里有详细的解释 article .

---

word-break:break-word 没有文档记录，只有高级开发人员知道这种 super secret 技术，例如 Quivering Palm of Death。

实际上它是一个不起眼的 -webkit- 属性，其工作方式类似于 word-wrap: break-word 但它也用于动态长度。

Kenneth.io - Word Wrapping Hypernation Using CSS

CSS-Tricks - word-break

来自 CaniUse :

Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.