overflow-wrap / word-wrap和word-break之间的确切区别是什么？ 任何人都可以告诉我，打破很长链接的更好的方法是什么？大多数人说你应该使用word-break和overflow-wrap，但它看起来不合逻辑。我认为将overflow-wrap与自动换行相结合以获得更好的跨浏览器支持是最好的方法。你觉得怎么样？
答案 0 :(得分：47)
从来源引用
word-wrap:自动换行CSS属性用于指定浏览器是否可以在单词中断行，以防止在其他不可破坏的字符串太长而无法放入其包含框中时出现溢出
overflow-wrap：word-wrap属性已在CSS3文本规范的当前草稿中重命名为overflow-wrap
word-break: word-break CSS属性用于指定如何（或如果）断开单词内的行
所以，你需要将word-break与自动换行相结合，这是正确的组合。
答案 1 :(得分：6)
了解一下，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具有相同的效果， 不管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在“计算最小含量的内在尺寸”时确实“考虑了单词中断带来的软包装机会”，而overflow-wrap: break-word在不是。
我认为如果考虑宽度，在某些情况下宽度可能更准确？
答案 2 :(得分：6)
以下是确切的区别：（基于Chrome v81的测试，并通过参考规格确认了我的观察结果）
空白
normal（默认）：折叠空白链和换行符；在需要的地方添加换行符
nowrap：折叠空白链和换行符；不添加换行符
pre-line：折叠空白链；在需要的地方添加换行符
pre-wrap：没有崩溃；在需要的地方添加换行符
break-spaces：与预换行相同，除了空格能够触发添加换行符
pre：没有崩溃；不添加换行符
注意：如果选定的white-space值列出“不添加换行符”，则以下属性的换行行为无法应用（即忽略）。
断字
normal（默认）：在容器内最后一个单词拟合的末尾使行中断（如果存在），否则行保持不中断
break-word：在容器[如果存在]中最后一个单词拟合的末尾处换行，否则在容器的末尾
break-all：在容器末尾处换行[即使在附近有空格的情况下，也可以拆分一个字]
溢出包装（旧名称：自动换行）
normal（默认）：在容器内最后一个单词拟合的末尾使行中断（如果存在），否则行保持不中断
break-word：在容器内的最后一个单词拟合末尾处断行（如果存在），在容器的末尾处断行（如果在非伸缩容器中），否则行不间断
anywhere：在容器[如果存在]中最后一个单词拟合的末尾处换行，在容器的末尾[与word-break: break-word]末尾
请注意，对于overflow-wrap: break-word（对于任何使行对于容器来说太长的组合），不间断的行会导致弹性容器超出指定的弹性比（迫使其他弹性容器收缩以适应内容太长。