Do `overflow-wrap: break-word` and `word-break: break-word` ever behave differently?

Question

My question:

Is there any difference between overflow-wrap: break-word and word-break: break-word?

Non-duplicates:

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

• 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.)

Code:

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>

Browser support:

• 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.

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

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?

Answer 1

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.

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:

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.