我的问题:
overflow-wrap: break-word
和 word-break: break-word
有什么区别吗?
非重复问题:
以下是一些已有的问题,乍一看可能是重复的,但实际上并不是。
- CSS 中 "word-break: break-all" 与 "word-wrap: break-word" 有何区别?(该问题是关于
word-break: break-all
的,而我的问题是关于word-break: break-word
的) - overflow-wrap 和 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/zh-CN/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/zh-CN/docs/Web/CSS/word-break#Browser_compatibility 显示,自Chrome 1、Firefox 67、Safari 3以来,
word-break: break-word
已受到支持。But不支持IE和Edge。
考虑到浏览器支持矩阵,看起来overflow-wrap:break-word
可以在所有现代浏览器中使用。
我想知道的是,你能否想象出任何类型的文本或HTML,使得overflow-wrap: break-word
和word-break: break-word
的行为有所不同?