white-space
Control how authored spaces, newlines and soft wrapping are handled.
Overview
| Class | Declarations |
|---|---|
break-spaces | white-space: break-spaces;
|
white-space:normal | white-space: normal;
|
white-space:nowrap | white-space: nowrap;
|
white-space:pre | white-space: pre;
|
white-space:pre-line | white-space: pre-line;
|
white-space:pre-wrap | white-space: pre-wrap;
|
white-space:<value> | white-space: <value>;
|
Examples
Keep text on one line
white-space:nowrap collapses repeated spaces and prevents soft wrapping. A constrained block and hidden overflow make the ellipsis meaningful.
<!-- A constrained single line --><span id="target" class="block overflow:hidden w:200px max-w:100% m:0 font-md leading:24px text-ellipsis white-space:nowrap">quarterly-roadmap-final-version.pdf</span>Generated CSS
@layer utilities { .text-ellipsis { text-overflow: ellipsis } .overflow\:hidden { overflow: hidden } .white-space\:nowrap { white-space: nowrap }}Preserve authored line breaks
white-space:pre-line keeps the authored newline but collapses the repeated spaces. Compare the exact same text with normal whitespace handling.
<!-- white-space:normal --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px white-space:normal">First lineSecond line</p><!-- white-space:pre-line --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px white-space:pre-line">First lineSecond line</p>Preserve spaces and wrapping
Both values preserve spaces and allow wrapping. With break-spaces, preserved spaces consume space at a line’s end and may break after each space; pre-wrap can hang trailing spaces.
<!-- white-space:pre-wrap --><code id="target" class="block w:8ch max-w:100% m:0 font-md leading:24px white-space:pre-wrap">token value</code><!-- break-spaces --><code id="target" class="block w:8ch max-w:100% m:0 font-md leading:24px break-spaces">token value</code>The eight spaces in the source are intentional. No decoration is inserted into the text node.
Apply conditionally
At the base viewport, normal whitespace collapses the newline. At sm the text remains on one line; print preserves the authored spaces and newline.
<!-- Preserved source · real conditions --><p id="target" tabindex="0" role="region" aria-label="Whitespace preview" class="overflow:auto w:240px max-w:100% m:0 font-md leading:24px white-space:normal break-spaces@print white-space:nowrap@screen@sm">First lineSecond line</p>Use text-wrap for line balancing without changing whitespace preservation.