Difference between overflow-wrap and word-break?
Quoting from source
overflow-wrap: The overflow-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
word-wrap: The
word-wrap
property was renamed tooverflow-wrap
in CSS3.word-break: The word-break CSS property is used to specify how (or if) to break lines within words
So, you need word-break in combination with word-wrap, which is the right combination.
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 deprecatedbreak-word
keyword. When specified, this has the same effect asword-break: normal
andoverflow-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?
Here are the exact differences: (based on testing in Chrome v81, and confirming my observations by referencing the spec)
white-space
normal
(default): collapses whitespace-chains and line-breaks; adds line-breaks where needednowrap
: collapses whitespace-chains and line-breaks; doesn't add line-breakspre-line
: collapses whitespace-chains; adds line-breaks where neededpre-wrap
: no collapsing; adds line-breaks where neededbreak-spaces
: same as pre-wrap, except with spaces able to trigger line-break-addingpre
: no collapsing; doesn't add line-breaks
Note: If the selected white-space
value lists "doesn't add line-breaks", the line-break behavior of the following properties is unable to be applied (ie. ignored).
word-break
normal
(default): breaks line at end of last word fitting within container [if one exists], else line left unbrokenbreak-word
: breaks line at end of last word fitting within container [if one exists], else at end of containerbreak-all
: breaks line at end of container [can split a word, even with nearby whitespace]
overflow-wrap (legacy name: word-wrap)
normal
(default): breaks line at end of last word fitting within container [if one exists], else line left unbrokenbreak-word
: breaks line at end of last word fitting within container [if one exists], else at end of container [if in non-flex container], else line left unbrokenanywhere
: breaks line at end of last word fitting within container [if one exists], else at end of container [so same as word-break: break-word
]
Note that for overflow-wrap: break-word
(as for any combination that leaves lines too long for the container), the unbroken line can cause a flex container to expand beyond the flex ratio specified (forcing other flex containers to shrink to account for the too-long content).