空白處理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="white-space:nowrap overflow:hidden text-ellipsis">    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 white-space:nowrap@sm break-spaces@print">...</div>

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