text-wrap
Choose native line-wrapping behavior for headings, prose and labels.
Overview
| Class | Declarations |
|---|---|
text-wrap | text-wrap: wrap;
|
text-nowrap | text-wrap: nowrap;
|
text-balance | text-wrap: balance;
|
text-pretty | text-wrap: pretty;
|
Examples
Balance short headings
Compare ordinary wrapping with text-balance at the same width. Balancing redistributes short lines; the exact breaks depend on the available font and browser.
<!-- text-wrap --><h2 id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-wrap">Good tools make room for clear thinking.</h2><!-- text-balance --><h2 id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-balance">Good tools make room for clear thinking.</h2>Generated CSS
@layer utilities { .text-balance { text-wrap: balance }}Prefer pretty wrapping for prose
text-pretty asks the browser to improve line breaking, such as avoiding a very short final line. It is an algorithm choice; it does not guarantee a particular final word count.
<!-- text-wrap --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-wrap">A clear reading rhythm gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p><!-- text-pretty --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-pretty">A clear reading rhythm gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>Prevent wrapping
text-nowrap suppresses soft line breaks. This complete example gives the label a block box, a limited width and an ellipsis for hidden overflow.
<!-- One line · explicit overflow handling --><span id="target" class="block overflow:hidden w:200px max-w:100% m:0 font-md leading:24px text-ellipsis text-nowrap">quarterly-roadmap-final-version.pdf</span>Keep the full label available in the surrounding UI when readers need it.
Apply conditionally
Resize the viewport to switch from normal wrapping to balance at sm, then pretty at lg. Print uses ordinary wrapping.
<!-- One heading · native viewport conditions --><h2 id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-wrap text-wrap@print text-balance@screen@sm text-pretty@screen@lg">Good tools make room for clear thinking.</h2>Use white-space to control preserved spaces and explicit line breaks.