溢出换行和换行有什么不同？

Question

overflow-wrap/word-wrap和word-break的确切区别是什么？谁能告诉我什么是打破很长的链接的更好的方法？大多数人说你应该结合使用分词和overflow-wrap，但这看起来并不是很合理。我认为结合使用overflow-wrap和word-wrap以获得更好的跨浏览器支持是最好的方法。你认为如何？

Answer 1

引用来源

• word-wrap:换行CSS属性用于指定浏览器是否可以在单词内换行，以防止在无法换行的字符串太长而无法放入其containing box.
• overflow-wrap：时溢出。在CSS3 Text specification
• word-break:的当前草稿中，word-wrap属性已重命名为overflow-wrap。换行CSS属性用于指定如何(或是否)在word

中换行

因此，您需要将换行与换行结合起来，这是正确的组合。

Answer 2

这有助于理解，在这一点上，word-break: break-word实际上是overflow-wrap: anywhere的别名。

word-break: break-word已正式弃用；请参阅CSS Text Module Level 3 Working Draft

为了与旧版内容兼容，word-break属性还支持不推荐使用的break-word关键字。指定后，无论overflow-wrap属性的实际值是多少，它都与word-break: normal和overflow-wrap: anywhere具有相同的效果。

这里需要注意的是，word-break: break-word是overflow-wrap: anywhere的别名，而不是overflow-wrap: break-word的别名。

(word-break: normal只是word-break的默认值，所以您可以忽略它，除非您为word-break设置了不同的值。)

overflow-wrap: anywhere和overflow-wrap: break-word有什么不同？

两者文档中唯一的区别是，当overflow-wrap: anywhere“计算最小内容的内在大小”时，它确实“考虑了由单词break引入的软包装机会”，而overflow-wrap: break-word则没有。

我猜宽度在某些情况下可能会更准确，如果考虑到它们的话？

Answer 3

这里是确切的区别：(基于在Chrome v81中的测试，并通过引用规范来确认我的观察结果)

空白

normal (默认)：折叠空格链和换行符；在需要的地方添加换行符

nowrap：折叠空格链和换行符；不添加换行符

pre-line：折叠空格链；在需要的地方添加换行符

pre-wrap：不折叠；在需要的地方添加换行符

break-spaces：与预换行相同，除了可以触发换行符添加的空格

pre：不折叠；不添加换行符

注意:如果选定的white-space值列出“不添加换行符”，则无法应用以下属性的换行符行为(即。忽略)。

分词

normal (默认)：在最后一个单词的末尾换行，如果存在适合容器的话，否则不换行

break-word：如果容器内存在最后一个单词，则在最后一个单词的末尾换行，否则在容器的末尾换行

break-all：容器末尾的换行符可以拆分单词，即使与附近的空格也是如此

overflow-wrap (传统名称:自动换行)

normal (默认)：在最后一个单词的末尾换行，如果存在适合容器的话，否则不换行

break-word：如果容器内存在最后一个单词的末尾，则在其末尾换行；如果在非弹性容器中，则在容器末尾换行；否则，将行保持不间断

anywhere：在容器内最后一个单词的末尾换行，如果存在，则在容器末尾换行，因此与word-break: break-word相同

请注意，对于overflow-wrap: break-word (对于为容器留下过长行的任何组合)，未中断的行会导致flex容器扩展超过指定的flex比率(强制其他flex容器收缩以考虑过长的内容)。