溢出换行和断字之间的区别？

Question

overflow-wrap/word-wrap和word-break之间的确切区别是什么？任何人都可以告诉我,打破很长链接的更好的方法是什么？大多数人说你应该使用word-break和overflow-wrap,但它看起来不合逻辑.我认为将overflow-wrap与自动换行相结合以获得更好的跨浏览器支持是最好的方法.你怎么看？

Answer 1

引自来源

• 自动换行:自动换行CSS属性用于指定浏览器是否可以在单词中断行,以防止在其他不可破坏的字符串太长而无法放入其包含框中时出现溢出.

• overflow-wrap:word-wrap属性已overflow-wrap在CSS3 Text规范的当前草稿中重命名

• word-break: word-break CSS属性用于指定如何(或如果)断开单词中的行

所以,你需要将word-break与自动换行相结合,这是正确的组合.

Answer 2

在这一点上，word-break: break-word它确实是overflow-wrap: anywhere.

word-break: break-word已正式弃用；请参阅CSS 文本模块级别 3 工作草案：

为了与旧内容兼容，该word-break属性还支持已弃用的break-word关键字。指定后，这与word-break: normaland具有相同的效果overflow-wrap: anywhere，而不管 overflow-wrap 属性的实际值如何。

这里要注意的是，这 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：换行在容器的结尾 [可以分割一个单词，即使附近有空格]

溢出包装（旧名称：自动换行）

normal（默认）：在适合容器的最后一个单词的末尾换行 [如果存在]，否则行保持不变
break-word：在适合容器的最后一个单词的末尾换行 [如果存在]，否则在容器的末尾 [如果存在] -flex 容器]，否则行保持不变
anywhere：在适合容器的最后一个单词的末尾断行 [如果存在]，否则在容器末尾 [与word-break: break-word] 相同

请注意，对于overflow-wrap: break-word（对于为容器留下太长行的任何组合），不间断的行会导致 flex 容器扩展到超出指定的 flex 比率（强制其他 flex 容器收缩以解决过长的内容）。

Answer 4

overflow-wrap强调如何处理溢出，word-break强调如何断词。