This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

overflow-wrap

Summary

This property specifies whether or not particularly long words will be ‘broken’ (separated into multiple lines) if necessary in order to fit in within its container.

Overview table

Initial value
normal
Applies to
all elements
Inherited
Yes
Media
visual
Computed value
specified value
Animatable
No
CSS Object Model Property
overflowWrap
Percentages
N/A

Syntax

  • overflow-wrap: break-word
  • overflow-wrap: normal

Values

normal
Lines can only be broken at normal break points (spaces, non-alphanumeric characters, etc.)

This is the default option.

break-word
Lines can be broken at any point if necessary to preserve the limits of the container element – for example, “hamburger” can be broken into “ham” and “burger” across separate lines.

Examples

We can compare two identical blocks of texts and see how the two possible values of overflow-wrap change the display of lines which do not fit within the container.

/* Using the CSS 'overflow-wrap' property. */
p {
    width: 5em;
    float: left;
    margin-right: 3em;
}

p:nth-child(1) {
    overflow-wrap: normal;
}

p:nth-child(2) {
    overflow-wrap: break-word;
}

View live example

Usage

 This property is only in use when white-space allows wrapping.

Notes

word-wrap is a commonly used alias for overflow-wrap; specifically, word-wrap was a prior iteration of the property. Most browsers recognize word-wrap, but usage of overflow-wrap should be encouraged.

Related specifications

CSS Text Module Level 3
Last Call Working Draft