word-break
Whether words may be broken between any two letters.
Syntax
word-break: value;Values
| Parameter | Type | Description |
|---|---|---|
| normal | keyword | Words break only at spaces and hyphens. |
| break-all | keyword | Lines may break between any letters, even when not needed. |
| keep-all | keyword | Do not break words in Chinese, Japanese and Korean text. |
Examples
break-all and normal behavior:
<style>
p { width: 150px; border: 1px solid lightgray; }
</style>
<p style="word-break: break-all;">Breaks anywhere: supercalifragilistic expialidocious</p>
<p>Normal: supercalifragilisticexpialidocious</p>Notes
break-all breaks even short words that would fit on the next line. To break only the words that would otherwise overflow, use overflow-wrap: anywhere.
See also
- overflow-wrap — Allows a long word to break so that it does not stick out of its block.
- hyphens — Automatic hyphenation of words at line ends.
- white-space — How spaces and line breaks in the source are handled and whether lines may wrap.
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.