溢出换行和分词之间的区别？

Posted 2023-02-19

【中文标题】溢出换行和分词之间的区别？

【英文标题】：Difference between overflow-wrap and word-break?

【发布时间】：2013-06-20 00:59:39

【问题描述】：

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

【问题讨论】：

致任何最初可能对为什么将其作为重复问题关闭而感到困惑的未来读者。 CSS Text Module Level 3 声明 overflow-wrap 和 word-wrap 在功能上应该 100% 相同。就我个人而言，我的印象是 word-wrap 应该只用于旧版浏览器支持，并且它可能会在未来的 CSS 版本中被弃用或删除。

致那些投票结束这个问题的人：这不是所说的重复，问题不一样。所谓的重复是关于这两个属性的两个特定值，这个问题是关于这两个属性的。我真的不喜欢有些人认为有权禁止其他人回答问题。如果您不喜欢某个问题，请不要阅读它！

@Tyler Crompton 你把word-wrap 和word-break 混淆了

我同意 Hibou57。这不是重复的。很遗憾它已经关闭，因为在网上很难找到这个问题的答案。

@TylerCrompton 这个问题与word-wrap 无关。这是关于word-break。将此作为重复问题结束是没有意义的。

【参考方案1】：

以下是确切的区别：（基于 Chrome v81 中的测试，并通过参考规范确认我的观察结果）

空白

normal（默认）：折叠空格链和换行符；在需要的地方添加换行符nowrap: 折叠空白链和换行符；不添加换行符pre-line: 折叠空白链；在需要的地方添加换行符pre-wrap: 没有折叠；在需要的地方添加换行符break-spaces：与预换行相同，除了能够触发换行符添加的空格pre：没有折叠；不添加换行符

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

断字

normal（默认）：在容器内的最后一个单词的末尾换行[如果存在]，否则行保持不变break-word：在容器内的最后一个单词的末尾换行[如果有存在]，否则在容器末尾break-all: 在容器末尾换行[可以拆分单词，即使附近有空格]

overflow-wrap（旧名称：word-wrap）

normal（默认）：在容器内最后一个单词的末尾换行[如果存在]，否则行保持不变break-word：在容器内最后一个单词的末尾换行[如果有存在]，否则在容器末尾 [如果在非 flex 容器中]，否则行保持完整anywhere：在容器内的最后一个单词末尾换行 [如果存在]，否则在容器末尾 [所以和word-break: break-word]

请注意，对于overflow-wrap: break-word（对于任何让行对容器来说太长的组合），实线会导致弹性容器扩展超过指定的弹性比率（迫使其他弹性容器缩小以解决内容太长）。

【讨论】：

基于您所说的“基于文档”的事实，我假设此内容主要是从某个地方复制的？ SO 通常不赞成纯粹复制其他地方的内容，但无论哪种方式，您在复制内容时必须引用来源以避免抄袭。此外，在 Chrome 中进行的测试很难可靠地确定某项内容是否符合规范的规定。

@TylerH 它不是（甚至接近于）其他地方内容的纯副本。大多数行为描述来自我在 Chrome 中的直接测试，引用文档页面只是为了确认我观察到的行为符合规范，并确保我没有遗漏其他行为。与抄袭相去甚远。 （我将更新顶部的注释以澄清）

对于一个真正认真而耐心的读者，真正想了解一切，这是最好的答案。非常感谢。

【参考方案2】：

这有助于理解在这一点上，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 不会。

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

【参考方案3】：

引用来源

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

overflow-wrap：word-wrap 属性在当前 CSS3 文本规范草案中已重命名为 overflow-wrap

word-break: word-break CSS 属性用于指定如何（或是否）在单词中换行

因此，您需要将 word-break 与 word-wrap 结合使用，这是正确的组合。

【讨论】：

嗯，是的word-wrap 就足够了，但是如果容器宽度有限，布局可能会混乱。

好的，我明白了。我只对链接使用自动换行，所以布局不会中断。

找到了答案：“讨论这些问题的 W3 规范似乎表明 word-break: break-all 用于要求 CJK 文本的特定行为，而 word-wrap: break-word 是更一般的、不知道 CJK 的行为。” (***.com/questions/1795109/…) CJK 是中文、日文和韩文的总称。

哦。但我认为你的问题完全不同。无论如何，很高兴您找到了答案，我相信我对您有所帮助

word-wrap 是一个过时的 Microsoft 扩展（即使它被大多数浏览器实现为无前缀属性），现在已被 overflow-wrap 取代。 MDN 将两个不同的页面合并为一个：developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap