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

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?