word-wrap vs word-break

word-wrap vs word-break

word-wrap property
word-wrap: normal | break-word
Specifies whether to break words when the content exceeds the boundaries of its container.

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

The spec has changed again with regards to word-wrap. It’s now considered still valid, but is an “alternate name” for overflow-wrap. Browsers are required to continue to support it, so it seems pointless to use overflow-wrap.

word-break property
word-break: normal | break-all | keep-all
Specifies line-breaking behavior within words, particularly where multiple languages appear in the object.

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). It is frequently used for CJK characters.

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