Difference between overflow-wrap and word-break?

Question

What´s the exact difference between overflow-wrap/word-wrap and word-break? And can anybody tell me what´s the better one for breaking

Answer 1

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?

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?