overflow-wrap

The overflow-wrap property in CSS allows you to specify that the browser can break a line of text inside the targeted element onto multiple lines in an otherwise unbreakable place. This helps to avoid an unusually long string of text causing layout problems due to overflow.

.example {
  overflow-wrap: break-word;
}

Values

  • normal: the default. The browser will break lines according to normal line breaking rules. Words or unbroken strings will not break, even if they overflow the container.
  • break-word: words or strings of characters that are too large to fit inside their container will break in an arbitrary place to force a line break. A hyphen character will not be inserted, even if the hyphens property is used.
  • inherit: the targeted element must inherit the value of the overflow-wrap property defined on its immediate parent.

The demo below has a toggle button that allows you to switch between normal and break-word.

See the Pen overflow-wrap/word-wrap demo by Louis Lazaris (@impressivewebs) on CodePen.

To demonstrate the problem that overflow-wrap attempts to solve, the demo uses an unusually long word inside a relatively small container. When you toggle break-word on, the word is broken to accommodate the small amount of space available, as if the word were multiple words.

A string of non-breaking space characters ( ) would be treated the same way and would also break at an appropriate spot.

overflow-wrap is useful when applied to elements that contain unmoderated user-generated content (like comments sections). This can prevent long URLs and other unbroken strings of text (e.g. vandalism) from breaking a web page’s layout.

Similarities to the word-break Property

overflow-wrap and word-break behave very similarly and can be used to solve similar problems. A basic summary of the difference, as explained in the CSS specification is:

  • overflow-wrap is generally used to avoid problems with long strings causing broken layouts due to text flowing outside a container.
  • word-break specifies soft wrap opportunities between letters commonly associated with languages like Chinese, Japanese, and Korean (CJK).

After describing examples of how word-break can be used in CJK content, the spec says: "To enable additional break opportunities only in the case of overflow, see overflow-wrap".

From this, we can surmise that word-break is best used with non-English content that requires specific word-breaking rules, and that might be interspersed with English content, while overflow-wrap should be used to avoid broken layouts due to long strings, regardless of the language used.

The Historical word-wrap Property

overflow-wrap is the standard name for its predecessor, the word-wrap property. word-wrap was originally a proprietary Internet Explorer-only feature that was eventually supported in all browsers despite not being a standard.

word-wrap accepts the same values as overflow-wrap and behaves the same way. According to the spec, browsers "must treat word-wrap as an alternate name for the overflow-wrap property, as if it were a shorthand of overflow-wrap". Also, all user agents are required to support word-wrapindefinitely, for legacy reasons.

Both overflow-wrap and word-wrap will pass CSS validation as long as the validator is set to test against CSS3 or higher (currently the default).

More Information

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
2312.14911186.1

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
7.0-7.137all4.46457

The "partial" support indicated above is due to older browsers supporting word-wrap but not overflow-wrap. Using both can ensure backwards compatibility.

The editor’s draft version of the W3C specification includes a new value called break-spaces that deals with sequences of “preserved” white space characters. There is no known browser support for this feature, and it is not included in the working draft version of the spec.

Comments

  1. User Avatar
    Yongwei Wu
    Permalink to comment#

    This example demonstrates more of hyphens than overflow-wrap, as one can remove the wrap properties and the result will remain the same. I tested on Safari and Firefox, and they both honour hyphens, as opposed to what is stated in the article.

    • User Avatar
      Louis
      Permalink to comment#

      Hyphens is a different issue altogether. The properties discussed here behave a certain way when hyphenation is not present.

      Hyphenation could have been discussed here, but that would cover too much ground. This is part of the “Almanac”, which discusses one feature at a time. You can look up hyphens under its own article (which is linked in the “Related” section).

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag