‘溢出-包装:断-字’和‘字-断:断-字’有不同的行为吗？

Question

我的问题：

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

Non-duplicates:

以下是一些现存的问题，乍一看可能是重复的，但不是。

• 在CSS中“单词中断:所有”和“单词包装:中断词”之间的区别是什么？ (这个问题是关于word-break: break-all的，但我这里的问题是关于word-break: break-word的)
• 溢流包装和断字之间的区别？ (这个问题询问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>

​

浏览器支持：

• 兼容性显示，自Chrome 23、边缘18、火狐49、Safari 6.1以来，overflow-wrap: break-word就得到了支持。IE中不支持它。(这里我忽略了word-wrap这个非标准的名字。我只关心标准的名字。
• 兼容性显示，自从Chrome 1，火狐67，Safari 3以来，word-break: break-word就得到了支持，IE和边缘不支持它。

考虑到浏览器支持矩阵，看起来overflow-wrap: break-word可以与所有现代浏览器协同工作。

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

Answer 1

为了简化它，word-wrap是溢流包的旧版本，在当前的CSS3规范中已被溢流包所取代。这条规则允许您告诉浏览器，当单词太长时，它是否允许断词。

另一方面，分词允许您告诉浏览器如何破解单词。

正如您在问题中所指出的，这两个规则的break-word值都是相同的。请参阅上述链接中的这些定义：

word-break: break-word

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

overflow-wrap: break-word

与anywhere值一样，如果行中没有其他可接受的断点，则允许在任意点断开通常不可断的单词，但在计算最小内容的内在大小时，不考虑由单词打断引入的软包装机会。

Answer 2

是的，overflow-wrap: break-word和word-break: break-word的行为可能有所不同。我遇到过这种情况，虽然我发现很难复制！

在这一点上，word-break: break-word实际上是overflow-wrap: anywhere的别名，这一点很有帮助。

word-break: break-word已被正式否决；请参阅CSS文本模块3级工作草案

为了与遗留内容兼容，word-break属性还支持不推荐的break-word关键字。当指定时，这与word-break: normal和overflow-wrap: anywhere具有相同的效果，而不管溢出包装属性的实际值如何。

这里要注意的是，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则不这样做。

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

Answer 3

正如用文档编写的那样，word-break: break-word以word-break: normal和overflow-wrap: anywhere相结合的形式运行，但覆盖实际的overflow-wrap值。

文档 for overflow-wrap指出，anywhere允许硬包装引入的软包装(例如，空格)，而word-break不允许软包装。

这意味着，如果容器具有取决于内容大小的内容，anywhere将计算宽度，就像没有溢出的单词一样，然后将它们裁剪以适合容器，而word-break将考虑将溢出的单词作为使容器尽可能宽的理由。

在示例中，宽度被设置为word-break: break-word和overflow-wrap: anywhere第一句中最长的单词，而overflow-wrap: break-word强制宽度达到极限，因为第二句中有一个长单词。

​

.owbw {
  overflow-wrap: break-word;
}

.owaw {
  overflow-wrap: anywhere;
}

.wbbw {
  word-break: break-word;
}

div {
  width: min-content;
  max-width: 150px;
  display: inline-block;
  background: lightgreen;
}

<h3>overflow-wrap: break-word</h3>
<div>
This text has no reason to take the max width. <b  class="owbw">The word AVeryLongWordWithoutAnyPlacesToBreakIt might cause it in some cases.</b>
</div><br>

<h3>overflow-wrap: anywhere</h3>
<div>
This text has no reason to take the max width. <b  class="owaw">The word AVeryLongWordWithoutAnyPlacesToBreakIt might cause it in some cases.</b>
</div><br>

<h3>word-break: break-word</h3>
<div>
This text has no reason to take the max width. <b  class="wbbw">The word AVeryLongWordWithoutAnyPlacesToBreakIt might cause it in some cases.</b>
</div>

​