logo标签列表

`overflow-wrap: break-word`和`word-break: break-word`在行文本溢出时会有不同的表现吗？

htmlcssbreak
6

我的问题：

overflow-wrap: break-word 和 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>

浏览器支持：

考虑到浏览器支持矩阵，看起来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属性的实际值如何。 (https://drafts.csswg.org/css-text-3/#word-break-property) 这可能是一个很好的起点。 - Temani Afif
这似乎是一个ppk问题：https://www.quirksmode.org/compatibility.html。（不是说他已经回答了。） - user241244
@D_N，“ppk”是什么意思？ - Lone Learner
这是运行quirksmode的人的缩写。他对CSS边缘用例进行了大量测试。 - user241244
3个回答
3
为了简化，word-wrap是overflow-wrap的旧版本，并在当前CSS3规范中被overflow-wrap取代。这个规则允许您告诉浏览器当单词太长时是否允许它们换行。
另一方面，word-break允许您告诉浏览器如何断开单词。
正如您在问题中指出的，这两个规则的break-word值将表现相同。请参见我提供的链接中的这些定义： word-break: break-word：

为了防止溢出，在行中没有其他可接受的断点时，通常不可分割的单词可以在任意点处被断开。

overflow-wrap: break-word:

与 anywhere 值相同，如果行中没有其他可接受的断点，则允许在任意点上断开通常不可分割的单词，但是，由于单词断开引入的软换行机会在计算最小内容固有大小时不予考虑。

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具有相同的效果，而不管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的页面：”

enter image description here

这是同一个页面，使用overflow-wrap: break-word属性的效果：

enter image description here

两者文档之间唯一的区别是，overflow-wrap: anywhere在计算“最小内容本质尺寸”时会“考虑单词断点引入的软换行机会”，而overflow-wrap: break-word则不会考虑。我猜想如果它考虑它们，有些情况下宽度可能更准确。
1
如文档中所述，word-break: break-word的行为类似于word-break: normal与overflow-wrap: anywhere的组合，但会覆盖实际的overflow-wrap值。 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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接