"overflow-wrap:break-word"和"word-break:break-word"的行为是否有所不同? [英] Do `overflow-wrap: break-word` and `word-break: break-word` ever behave differently?

问题描述

我的问题:

overflow-wrap: break-word和word-break: break-word之间有区别吗?

非重复项:

以下是一些现有的问题，乍一看似乎是重复的，但事实并非如此.

Here are some existing questions that may appear to be duplicates at first sight but aren't.

• 什么是断字:全部"之间的区别与自动换行:断词"相对应在CSS 中(该问题是关于word-break: break-all的，但是我的问题是关于word-break: break-word的)
• 溢出包装和断字之间的区别?(该问题询问了overflow-wrap和word-break属性，但是我的问题特别是关于该属性的break-word值.此外，该问题被神秘地标记为上一个问题的重复，即使该问题无关.)

• What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS (That question is about word-break: break-all but my question here is about word-break: break-word)
• Difference between overflow-wrap and word-break? (That question asks about overflow-wrap and word-break attributes but my question here is about the break-word value for this attributes in particular. Also, that question is mysteriously marked as a duplicate of the previous question even though it is unrelated.)

代码:

我编写了此代码段，似乎表明overflow-wrap: break-word和word-break: break-word的行为方式相同.但是我不确定我是否已经考虑了所有情况.也许在某些情况下他们的行为有所不同?

I wrote this code snippet that appears to show that both overflow-wrap: break-word and word-break: break-word behave the same way. But I don't know for sure if I have accounted for all cases. Maybe there is a case in which they behave differently?

.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.IE和Edge不支持.

• https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#Browser_compatibility shows that overflow-wrap: break-word is supported since Chrome 23, Edge 18, Firefox 49, Safari 6.1. It isn't supported in IE. (I am ignoring the non-standard name word-wrap here. I care only about the standard name.)
• https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#Browser_compatibility shows that word-break: break-word is supported since Chrome 1, Firefox 67, Safari 3. It isn't supported in IE and Edge.

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

Considering the browser support matrix, it looks like overflow-wrap: break-word works with all modern browsers.

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

What I want to know if you can imagine any type of text or HTML that would make overflow-wrap: break-word and word-break: break-word behave differently?

推荐答案

为简化起见，word-wrap是 overflow-wrap ，并已由

To simplify it, word-wrap is an older version of overflow-wrap and has been replaced by overflow-wrap in the current CSS3 specification. This rule allows you to tell the browser is it allowed to break words when they are too long.

另一方面，断字允许您告诉浏览器如何破解单词.

On the other hand, word-break allows you to tell the browser how to break the words.

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

As you've noted in your question, the break-word value for both of these rules will behave the same. See these definitions from the links I provided above:

word-break: break-word:

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

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

overflow-wrap: break-word:

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

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.

这篇关于"overflow-wrap:break-word"和"word-break:break-word"的行为是否有所不同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！