What is the difference between "word-break: break-all" versus "word-wrap: break-word" in CSS

word-wrap: break-word recently changed to overflow-wrap: break-word

• will wrap long words onto the next line.
• adjusts different words so that they do not break in the middle.

word-break: break-all

• irrespective of whether it’s a continuous word or many words, breaks them up at the edge of the width limit. (i.e. even within the characters of the same word)

So if you have many fixed-size spans which get content dynamically, you might just prefer using word-wrap: break-word, as that way only the continuous words are broken in between, and in case it’s a sentence comprising many words, the spaces are adjusted to get intact words (no break within a word).

And if it doesn’t matter, go for either.

The W3 specification that talks about these seem to suggest that word-break: break-all is for requiring a particular behaviour with CJK (Chinese, Japanese, and Korean) text, whereas word-wrap: break-word is the more general, non-CJK-aware, behaviour.

With word-break, a very long word starts at the point it should start and it is being broken as long as required

[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live 
inside this narrow paragr
aph.

However, with word-wrap, a very long word WILL NOT start at the point it should start. it wrap to next line and then being broken as long as required

[X] I am a text that 
012345678901234567890123
4567890123456789 want to
live inside this narrow 
paragraph.