CSS: overflow-wrap

By Xah Lee. Date: . Last updated: .

overflow-wrap

This is useful because often you have long url, and on mobile phone small screen, it'll create horizontal scroll. To fix, add overflow-wrap: anywhere.

overflow-wrap: normal

default.

overflow-wrap: anywhere

force display a line break for long words, such as long URL. 

pre,
code,
h1,
s,
a,
 {
 overflow-wrap: anywhere;
}
/* in h1 because you may have a long joined word e.g. Number.prototype.toLocaleString and when in large font and on phone screen it causes horizontal scroll. */
overflow-wrap: break-word

same as overflow-wrap: anywhere but the value of the element's intrinsic width is not changed, and this has an effect when you use width: min-content. (as if you have overflow-wrap: normal).

History

The property was originally a nonstandard Microsoft creation called word-wrap. It is renamed to overflow-wrap by CSS standard.

CSS. overflow, line wrap