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; }
Live Demo
View this demo on the Codrops PlaygroundBrowser 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 Candidate Recommendation
Supported from the following versions:
Desktop
- 23
- 49
- 5.5
- 12
- 6.1
Mobile / Tablet
- 7.0
- 4.4
- all
- 131
- 132