文字換行text-wrap

Controlling how text inside an element is wrapped.

Overview

Examples

Balance short headings

Use text-balance for headings, cards, and callouts where balanced line lengths are more important than fitting as much text as possible on each line.

<h1 class="text-balance">    Build interfaces that stay readable across narrow and wide containers</h1>

@layer utilities {    .text-balance {        text-wrap: balance    }}

Prefer pretty wrapping for prose

Use text-pretty for paragraphs where the browser should avoid awkward last lines when it can.

<p class="text-pretty">    Master CSS keeps text wrapping decisions in markup while still using native CSS behavior.</p>

Prevent wrapping

Use text-nowrap when a label, tab, or inline control must stay on one line.

<span class="text-nowrap overflow:hidden text-ellipsis">    Very long file name</span>

Only use no-wrap when the container has an overflow strategy. Otherwise the text can force the layout wider than intended.

Apply conditionally

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

<div class="text-wrap text-balance@sm text-pretty@lg text-wrap@print">...</div>

Use white-space when the requirement is preserving spaces or line breaks.