CSS: Overflow Wrap

By Xah Lee. Date: . Last updated: .

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.
overflow-wrap: break-word
similar to anywhere. Don't use this.

Example:

body
{
overflow-wrap: anywhere;
}

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

CSS, overflow, line wrap