word-wrap: break-word 和 word-break: break-word 的区别答案

【问题标题】：Difference between word-wrap: break-word and word-break: break-wordword-wrap: break-word 和 word-break: break-word 的区别
【发布时间】：2016-05-17 00:33:16
【问题描述】：

我需要在某个地方修复一些 CSS，因为我的文本没有环绕，而是如果它是一个非常长的单词，则会无限期地继续。

与大多数情况一样，我在我的 CSS 文件中尝试了word-wrap: break-word;，但没有成功。

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

此外，我不认为word-break: break-word; 是记录在案的行为，因为W3 没有提及它。我在 Safari 和 Chrome 上对其进行了测试，它在两者上都能完美运行，但我对使用 word-break: break-word; 犹豫不决，因为我在任何地方都没有看到它。

【问题讨论】：

标签： html css word-wrap word-break

【解决方案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 没有记录在案，只有大师级的开发人员知道这种超级机密的技术，例如颤抖的死亡手掌。

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

Kenneth.io - Word Wrapping Hypernation Using CSS

CSS-Tricks - word-break

来自CaniUse：

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

【讨论】：

我明白了。我想它对我有用的原因是因为“它也用于动态长度”。我需要以某种方式纠正它，以便我可以改用 word-wrap: break-word; 我宁愿不依赖所有相关浏览器未正式记录/支持的东西。
如果你在破坏单词，我想你也会想用连字符连接它们。请参阅我的帖子中的更新。