text balance wrap typography orphan balanced line breaks in headings prevent orphaned words in paragraphs better typography for responsive text headings have uneven line lengths last line has a single orphaned word need balanced text without manual line breaks
Text Balance
Fetch snippet JSON:
curl https://webspire.de/snippets/text/balance.json This heading wraps with balanced line lengths
The paragraph below keeps better rhythm too, so the final line does not end up with a lonely orphaned word.
Background
Quick Start
<h1 class="text-balance">A heading that wraps evenly</h1>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 79 bytes · 7 lines
- Classes
-
.text-balance.text-pretty
text balance wrap typography orphan
text-wrap: balance distributes words evenly across lines in headings. text-wrap: pretty prevents orphaned words on the last line of paragraphs. Both are native CSS — no JavaScript needed.
Balanced heading
<h1 class="text-balance text-4xl font-bold text-white max-w-lg">
Build beautiful interfaces with balanced typography
</h1>Pretty paragraph (no orphans)
<p class="text-pretty max-w-prose text-white/70">
This paragraph will avoid leaving a single word on the last line,
creating more polished typography across different viewport sizes.
</p>