html – 自动换行的区别：break-word和word-break：break-word

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

就像在大多数情况下一样,我尝试了自动换行：break-word;在我的CSS文件中,它不起作用.

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

此外,我不认为断言：断言;是记录在案的行为,看看W3没有提到它.我在Safari和Chrome上进行了测试,它在两者上都很完美,但是我对使用断言有点犹豫：破解词;因为我在任何地方都没有提到它.

解决方法

更新

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

.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.