Skip to main content
PUBLIC.INTERNET
⚡ Acces Instantane🔒 Confidentialite d'Abord🆓 Toujours Gratuit📱 Fonctionne Partout

text-wrap: balance vs pretty Preview

CSS finally fixed two old typesetting annoyances with the text-wrap property, but the difference between its values is hard to picture from documentation alone. This tool shows it directly. It renders your text twice at the same width, the left pane using the browser default and the right pane using balance, pretty, or nowrap, so you can watch the wrapping change side by side. balance evens out the number of characters per line and is meant for headings, where a lonely last word looks awkward; the engine balances up to about four lines. pretty targets body copy, nudging the last few lines so you do not end a paragraph with a single orphaned word. Type your own headline or paragraph, drag the container width to simulate different screens or column sizes, and copy the one-line CSS. The tool detects whether your browser supports each value and tells you, since these features reached baseline support in 2024 and behave as a progressive enhancement everywhere else.

Default (text-wrap: wrap)

With balance

CSS

How to Compare text-wrap Values
  1. Pick a value - Use the Compare default against menu to choose balance, pretty, or nowrap for the right-hand pane.
  2. Enter your text - Replace the sample in the text box with your real headline or paragraph; both panes update as you type.
  3. Resize the container - Drag the Container width slider to see how the wrapping holds up at narrow and wide measures.
  4. Read the support note - The note confirms whether your browser renders the chosen value live and explains when to use it.
  5. Copy the CSS - Copy the generated rule (scoped to headings for balance, body text for pretty) into your stylesheet.
Why This Tool?
 Search for text-wrap balance and you get explainer articles and MDN reference pages, but almost nothing that lets you paste your own headline and feel the difference at a chosen width. That is the part worth seeing: balance looks great on a two-line title and does nothing useful on a long paragraph, while pretty is the reverse. Putting the default and the enhanced version next to each other makes the right choice obvious in seconds instead of after a deploy. 
 Both values are a clean progressive enhancement. text-wrap: balance reached baseline support across Chrome, Edge, Firefox, and Safari, and pretty followed; in any browser that does not support them, text simply wraps normally with no breakage. That is why this tool checks CSS.supports() and tells you whether the live preview reflects the feature, so you are never fooled by a browser that is quietly ignoring the property. 
 Used well, these are among the cheapest typography upgrades available: one declaration on your headings stops awkward single-word lines, and one on your body text removes orphans, with no JavaScript and no layout shift. This tool helps you apply them deliberately rather than sprinkling balance everywhere and hoping.