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

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 没有记录，只有开发大师才知道这种超级秘密技术，例如 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.

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

Difference between word-wrap: break-word and word-break: break-word

html

css

word-wrap

word-break