overflow-wrap
Allows a long word to break so that it does not stick out of its block.
Syntax
overflow-wrap: anywhere;Values
| Parameter | Type | Description |
|---|---|---|
| normal | keyword | Long words stick out of the block. |
| break-word | keyword | Break a word only if it does not fit on a line by itself. |
| anywhere | keyword | The same, and the block can also shrink below the word's length. |
Examples
A long link in a narrow column:
<style>
p { width: 160px; border: 1px solid lightgray; }
</style>
<p>Without: https://example.com/a/very/long/address/that/does/not/fit</p>
<p style="overflow-wrap: anywhere;">With: https://example.com/a/very/long/address/that/does/not/fit</p>Notes
A good default for user-generated content such as comments and chat messages: long links and strings of letters will not break the layout. The old name of the property is word-wrap.
See also
- word-break — Whether words may be broken between any two letters.
- hyphens — Automatic hyphenation of words at line ends.
- overflow — What to do with content that does not fit into the element.
Related recipes
In the tutorial
- Overflow and layers — What to do when content does not fit into a block — overflow, scrolling, an ellipsis — and how z-index decides which element lies on top.