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显示overflow-wrap: break-word自Chrome 23，Edge 18，Firefox 49，Safari 6.1开始受支持。 IE不支持。（我在这里忽略了非标准名称word-wrap。我只关心标准名称。）
https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Browser_compatibility显示word-break: break-word自Chrome 1，Firefox 67，Safari 3开始受支持。IE和Edge不支持。{li>

考虑到浏览器支持列表，看来overflow-wrap: break-word适用于所有现代浏览器。

我想知道是否可以想象会导致overflow-wrap: break-word和word-break: break-word表现不同的任何类型的文本或HTML？

Answer 1

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

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

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

word-break: break-word：

为防止溢出，如果行中没有其他可接受的断点，则通常会在任意点处打断牢不可破的单词。

overflow-wrap: break-word：

与anywhere值相同，如果行中没有其他可接受的断点，则通常可以将不易碎的单词允许在任意点处打断，但是在计算最小内容时，不考虑单词break带来的软包装机会固有尺寸。

Answer 2

是的，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在不是。

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

{over-wrap：break-word`和`word-break：break-word`的行为是否有所不同？

2 个答案: