white-space
How spaces and line breaks in the source are handled and whether lines may wrap.
Syntax
white-space: value;Values
| Parameter | Type | Description |
|---|---|---|
| normal | keyword | Spaces collapse, lines wrap (the default). |
| nowrap | keyword | Spaces collapse, but the text stays on one line. |
| pre | keyword | Spaces and breaks are kept as in the source, no wrapping — like `<pre>`. |
| pre-wrap | keyword | Spaces and breaks are kept, long lines wrap. |
| pre-line | keyword | Breaks are kept, extra spaces collapse. |
Examples
No wrapping and kept line breaks:
<style>
div { width: 160px; border: 1px solid lightgray; margin-bottom: 8px; }
</style>
<div style="white-space: nowrap;">This line never wraps to the next one</div>
<div style="white-space: pre-line;">Line breaks
are kept here
as in the source</div>Notes
nowrap is useful for prices, dates and buttons that must not break, like "$1 200". pre-wrap suits text the user typed into a <textarea>.
See also
- text-overflow — How text that does not fit is cut: abruptly or with an ellipsis.
- overflow-wrap — Allows a long word to break so that it does not stick out of its block.
- word-break — Whether words may be broken between any two letters.
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.