CSS Word Wrapping

Making CSS wrap text

If a container contains a word that is too long to fit between the edges, you can use the CSS word-wrap property to allow breaking words and wrapping them in the next line:

p.learn {
    word-wrap: break-word;
}

It may seem similar to word-break, but there is a clear difference: word-wrap is used to break a word that is too long to fit, and word-break breaks the last word in a too long line.

CSS word-wrap syntax

There are two possible values to define for CSS word wrap:

p.learn {
    word-wrap: normal;
}

Note: since the CSS Text Level 3 specification, word-wrap was renamed as overflow‑wrap.

Browser support

Mobile browser support