white-space

Controlling how whitespace and line breaks within an element are handled.

Overview

Examples

Keep text on one line

Use white-space:nowrap when inline text should not wrap. Pair it with overflow handling when the container can become narrow.

<span class="overflow:hidden text-ellipsis white-space:nowrap">  A long single-line label</span>

@layer utilities {  .text-ellipsis {    text-overflow: ellipsis  }  .overflow\:hidden {    overflow: hidden  }  .white-space\:nowrap {    white-space: nowrap  }}

Preserve authored line breaks

Use white-space:pre-line to preserve line breaks while still collapsing runs of spaces.

<p class="white-space:pre-line">  First line  Second line</p>

Preserve spaces and wrapping

Use white-space:pre-wrap or break-spaces when user-authored spacing should remain visible.

<code class="break-spaces">token    value</code>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="white-space:normal break-spaces@print white-space:nowrap@sm">...</div>

Use text-wrap when the problem is line balancing rather than preserving whitespace.