html - `overflow-wrap: break-word` 和 `word-break: break-word` 的行为是否不同？

Question

我的问题:

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 值. 另外，那个问题被神秘地标记为与前一个问题的重复，即使它是不相关的。)

代码:

我写的这段代码似乎表明 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 我想知道的是行为不同？

Answer 1

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

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

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

word-break: 断词:

To prevent overflow, normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

溢出换行:中断词:

The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-content intrinsic sizes.