12

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

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

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

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

4

1 回答 1

13

更新

如果您打算打破单词并想连字符，请尝试以下操作：

.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 的 Word Wrapping Hypernation

CSS 技巧 - 断字

来自CaniUse：

Chrome、Safari 和其他 WebKit/Blink 浏览器也支持break-word被视为word-wrap: break-word.

于 2016-02-07T08:28:40.627 回答