自动换行:break-word和word-break:break-word之间的区别

Question

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

就像在大多数情况下一样,我word-wrap: break-word;在我的CSS文件中尝试过它并没有用.

然后,令我惊讶的是,根据Google Chrome开发者工具的建议,我尝试word-break: break-word;了解决了我的问题.我对此感到震惊,所以我一直在谷歌上搜索这两者之间的区别,但我没有看到这个问题.

此外,我不认为W3没有提及它的word-break: break-word;记录行为.我在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中也有效......有点......没有连字符.反正一个详细的解释是这样的文章.

word-break:break-word没有记录,只有主开发人员知道像Quivering Palm of Death这样的超级秘密技术.

实际上它是一个不起眼的-webkit-属性,word-wrap: break-word但它也用于动态长度.

Kenneth.io - 使用CSS包装Hypernation的Word

CSS-Tricks - 单词休息

来自CaniUse:

Chrome,Safari和其他WebKit/Blink浏览器也支持非官方break-word值,这被视为word-wrap: break-word.