溢出包装和断字之间的区别？

overflow-wrap/word-wrap和之间的确切区别是word-break什么？有人可以告诉我打破长链接的更好的方法吗？大多数人说您应该将断字与结合使用，overflow-wrap但看起来不太合逻辑。我认为overflow-wrap结合使用以word-wrap获得更好的跨浏览器支持是最好的方法。你怎么看？

从源报价

• 自动换行：自动换行CSS属性用于指定浏览器是否可以在单词内换行，以防止在其他情况下坚不可摧的字符串太长而无法容纳其包含框时溢出。

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

• 断字：断字CSS属性用于指定如何（或是否）在字内断行

因此，您需要将断字与自动换行结合使用，这是正确的组合。

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

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

为了与旧内容兼容，该word-break属性还支持不推荐使用的break-word关键字。当指定时，这具有相同的效果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在“计算最小含量的内在尺寸”时“确实考虑了单词中断带来的软包装机会”，而overflow-wrap: break-word没有。

我想如果考虑宽度，在某些情况下宽度可能会更准确？

确切的区别如下：（基于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（对于任何使行对于容器来说太长的组合），不间断的行会导致伸缩容器超出指定的伸缩率（迫使其他伸缩容器收缩以解决内容太长）。