CSS Reference Property

word-wrap

The word-wrap property is used to specify whether lines can break inside words that are so long that they would overflow their container and that are otherwise not breakable by default.

How is it different from the word-break property? Well, the word-break property breaks a line in between two characters of a word which comes at the end of this line, to make the whole line fit inside its container. But the word-wrap property, on the other hand, breaks a word when the word itself takes up an entire line and overflows that line; that is, when the word itself and on its own is too long that it would overflow its container, so we make it wrap just line a line would wrap to fit inside its container.

The word-wrap property only has an effect when white-space allows wrapping.

The word-wrap property is called overflow-wrap in the CSS Text Level 3 specification (which is still a Working Draft so things may change).

Trivia & Notes

The two properties (word-break and word-wrap) differ rules and overflow of words: as mentioned earlier, word-wrap is used to break words that overflow their container, while the word-break property breaks all words at the end of a line, even those that would normally wrap onto another line and wouldn’t overflow their container.

No hyphenation character is inserted at the break point of the word. Because of that, it would be wiser to use this property in conjunction with the hyphens property.

Official Syntax

  • Syntax:

    word-wrap: normal | break-word
  • Initial: normal
  • Applies To: all elements
  • Animatable: no

Values

normal
lines may only break at normal word break points.
break-word
normally unbreakable words may be broken at arbitrary points if there are no otherwise acceptable break points in the line.

Examples

The following line will break all words (inside paragraphs) that are too long and would normally overflow their container.

p {
    word-wrap: break-word;
}
                

Browser Support

CSS3 Overflow-wrap

Allows lines to be broken within words if an otherwise unbreakable string is too long to fit. Currently mostly supported using the `word-wrap` property.

W3C Working Draft

Supported from the following versions:

Desktop

  • 23
  • 49
  • 5.5
  • 12
  • 6.1

Mobile / Tablet

  • 7.0
  • 4.4
  • all
  • 61
  • 55

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Further Reading

Written by

Last updated December 11, 2016 at 10:55 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.