IconVault logoIconVault
Sign in

CSS text-wrap - Interactive Lab | IconVault

Compare CSS text-wrap balance vs pretty vs stable side by side with live controls. Free, runs in your browser.

All tools

CSS text-wrap

Compare balance, pretty and stable

5 of 5 free uses left

One line of CSS fixes ugly ragged headlines and lonely last words. Drag the width slider to see each mode reflow live. stable needs a recent Chrome or Edge, other modes degrade to normal wrapping where unsupported.

text-wrap: balance

Balances every line to roughly equal length. Best for headings and cards.

The quick brown fox jumps over the lazy dog near the riverbank at sunset while birds circle overhead.

text-wrap: pretty

Like normal wrapping, but avoids orphans on the last line. Best for body copy.

The quick brown fox jumps over the lazy dog near the riverbank at sunset while birds circle overhead.

text-wrap: stable

Prevents layout shift while editing: later lines never reflow when you type. Newer browsers only.

The quick brown fox jumps over the lazy dog near the riverbank at sunset while birds circle overhead.

The CSS you need

.heading { text-wrap: balance; }
.body-copy { text-wrap: pretty; }
.editable { text-wrap: stable; }

5 of 5 free copies left.

About this tool

IconVault's CSS text-wrap playground puts balance, pretty and stable side by side so you can see the difference instead of reading about it. Type your own headline, drag the width slider, and watch each mode reflow live: balanced lines for headings, orphan-free paragraphs for body copy, and shift-free editing for inputs.

It is free and runs fully in your browser. One click copies the three-line CSS you actually need, and the lab notes browser support honestly: `stable` needs a recent Chromium, the other modes degrade to normal wrapping where unsupported.

Frequently asked questions

Popular searches

text-wrapcss text-wraptext-wrap balancetext-wrap prettytext-wrap stabletext wrap csscss text wrapbalance text csshow to balance texteven lines cssavoid orphans cssorphan text csslast line single word cssheadline wrapping cssheading line breakscard title wrappingtext-wrap browser supporttext-wrap stable supporttext wrap pretty supportcss text-wrap tutorialtext-wrap exampletext-wrap democompare text-wrapbalance vs prettytext wrap playgroundcss playgroundtypography cssbetter typography csscss text balancetext-wrap balance headingstext-wrap pretty paragraphscontenteditable line breakstextarea layout shiftprevent layout shift typingcss one linersuseful css propertiesmodern cssmodern css featurescss text tricksresponsive typographyfluid typography csswidow orphan csscss widows orphanstext wrapping explainedcss white spaceoverflow wrap vs text-wrapword wrap cssline break cssfree css toolcss labinteractive css

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →