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-wordoverflow-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;
}
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