CSS overflow-wrap

The overflow-wrap or word-wrap CSS property is used to allow the breaking of long strings that would overflow their container otherwise. The typical example is the case of long URLs. Note that word-wrap is just an alias of the standard overflow-wrap.

overflow-wrap acts just in the case of overflow. To hyphenate text use CSS hyphens and not overflow-wrap.

overflow-wrap: normal|break-word

Using overflow-wrap: break-word as a general style is a good idea. The property is inherited and I can't think of any case where you want a long string of text to overflow it's container. Note that overflow-wrap doesn't add a hyphen.

Browser Support: Full support but some browsers still use the legacy name word-wrap. Just include both for full support.

overflow-wrap: break-word

overflow-wrap will be applied to long strings only.

Use word-wrap (an alias used by several browsers) before overflow-wrap for full support:

div.cont {
word-wrap: break-word; overflow-wrap: break-word;
}
Very long strings in this text will break into the next line: extremely_long_string_without_spaces_that_doesnt_fit_in_one_line_and_doesnt_overflow

overflow-wrap vs word-break

The CSS word-break property will break when it reaches the end always, most probably breaking a word, without following language word breaking rules. On the other hand overflow-wrap breaks just long strings. Use just overflow-wrap along with hyphens (which does follow word breaking rules) to hyphenate English and most other languages.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>