`overflow-wrap: break-word` 和 `word-break: break-word` 的行为是否有所不同？答案

【问题标题】：Do `overflow-wrap: break-word` and `word-break: break-word` ever behave differently?`overflow-wrap: break-word` 和 `word-break: break-word` 的行为是否有所不同？
【发布时间】：2023-03-05 09:08:02
【问题描述】：

我的问题：

overflow-wrap: break-word 和 word-break: break-word 有什么区别吗？

不重复：

以下是一些现有的问题，乍一看似乎是重复的，但实际上并非如此。

What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS（这个问题是关于word-break: break-all，但我的问题是关于word-break: break-word）
Difference between overflow-wrap and word-break?（该问题询问overflow-wrap 和word-break 属性，但我的问题是关于此属性的break-word 值。此外，该问题被神秘地标记为上一个问题的重复，即使它无关。）

代码：

我编写的这段代码 sn-p 似乎表明 overflow-wrap: break-word 和 word-break: break-word 的行为方式相同。但我不确定我是否已经考虑了所有情况。也许在某些情况下他们的行为不同？

.ow {
  overflow-wrap: break-word;
  background: lightgreen;
}

.wb {
  word-break: break-word;
  background: lightblue;
}

div {
  width: 5em;
  display: inline-block;
}

<div class="ow">
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
</div>

<div class="wb">
Honorificabilitudinitatibus califragilisticexpialidocious Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
</div>

<div class="ow">
Most words are short and don't need to break. But Antidisestablishmentarianism is long.
</div>

<div class="wb">
Most words are short and don't need to break. But Antidisestablishmentarianism is long.
</div>

浏览器支持：

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#Browser_compatibility 表示自 Chrome 23、Edge 18、Firefox 49、Safari 6.1 起支持 overflow-wrap: break-word。它在 IE 中不受支持。（这里我忽略了非标准名称word-wrap。我只关心标准名称。）
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Browser_compatibility 表示自 Chrome 1、Firefox 67、Safari 3 起支持 word-break: break-word。IE 和 Edge 不支持它。

考虑到浏览器支持矩阵，overflow-wrap: break-word 似乎适用于所有现代浏览器。

我想知道您是否可以想象任何类型的文本或 HTML 会使 overflow-wrap: break-word 和 word-break: break-word 行为不同？

【问题讨论】：

来自规范：为了与旧版内容兼容，word-break 属性还支持已弃用的 break-word 关键字。指定后，这与 word-break: normal 和 overflow-wrap:anywhere 具有相同的效果，无论 overflow-wrap 属性的实际值如何。 (drafts.csswg.org/css-text-3/#word-break-property) 这可能是一个很好的起点
这似乎是一个 ppk 问题：quirksmode.org/compatibility.html。（不是说他已经回答了。）
@D_N “ppk”是什么意思？
运行 quirksmode 的人的姓名缩写。他对边缘案例 CSS 进行了大量测试。

标签： html css break

【解决方案1】：

是的，overflow-wrap: break-word 和 word-break: break-word 的行为可能不同。我遇到过这种情况，但我发现它很难重现！

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

两者在文档中的唯一区别是overflow-wrap: anywhere 在“计算最小内容内在大小”时会“考虑由分词引入的软换行机会”，而overflow-wrap: break-word 不会。

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

【讨论】：

【解决方案2】：

为简化起见，word-wrap 是 overflow-wrap 的旧版本，在当前 CSS3 规范中已被 overflow-wrap 取代。此规则允许您告诉浏览器是否允许在单词过长时分词。

另一方面，word-break 允许您告诉浏览器如何分词。

正如您在问题中所指出的，这两个规则的 break-word 值的行为相同。从我上面提供的链接中查看这些定义：

word-break: break-word:

为了防止溢出，如果行中没有其他可接受的断点，通常不可断的单词可能会在任意点被断掉。

overflow-wrap: break-word:

与anywhere值相同，如果行中没有其他可接受的断点，则允许在任意点打破通常不可破坏的单词，但在计算最小内容时不考虑由单词中断引入的软换行机会内在尺寸。

【讨论】：