自动换行：断字和断字：断字之间的区别

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没有记载，只有高级开发者知道这种超级秘密的技术，如 颤抖的死亡之手 。

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

来自CaniUse：

Chrome，Safari和其他WebKit / Blink浏览器也支持非官方break-word值，就像一样word-wrap: break- word。