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-dup

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.

Answer 2

Yes, overflow-wrap: break-word and word-break: break-word can behave differently. I've run into that, though I'm finding it hard to reproduce!

It helps to understand that at this point, word-break: break-word is really an alias for overflow-wrap: anywhere.

word-break: break-word is officially deprecated; see the CSS Text Module Level 3 Working Draft:

For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.

The thing to note here is that word-break: break-word is an alias for overflow-wrap: anywhere, NOT an alias for overflow-wrap: break-word.

(word-break: normal is just the default value for word-break, so you can ignore it unless you're setting a different value for word-break.)

How do overflow-wrap: anywhere and overflow-wrap: break-word differ?

Well, here's a page from the wild, using overflow-wrap: anywhere:

And here's the same page, using overflow-wrap: break-word:

The only difference in the documentation between the two is that overflow-wrap: anywhere DOES "consider soft wrap opportunities introduced by the word break" when it is "calculating min-content intrinsic sizes", while overflow-wrap: break-word does NOT.

I guess widths might be more accurate in some cases if it is considering them?