CSS text-wrap: balance and pretty for Better Headlines

A headline can have the right font, size, and measure yet still finish with one stranded word. Ordinary line wrapping fits text efficiently, but efficiency does not always produce a pleasing shape. CSS offers wrapping strategies that improve that shape without inserting permanent editorial line breaks.

Diagnose the text before changing its wrapping

Start with the actual content, not a carefully chosen sample. Use the word counter to compare headline lengths and identify unusually verbose titles. It will not predict browser line breaks, but it helps distinguish a wrapping issue from a heading that simply contains too many competing ideas.

Try the shortest, typical, and longest titles in the same container. Record which ones produce a very short final line, an excessively tall block, or an awkward break around a product name. These are different problems: wrapping strategy can improve line distribution, but it cannot repair unclear wording or an unsuitable type size.

Keep content width and font settings stable while comparing wrapping modes. Otherwise a narrower container or a different font weight can appear to be the improvement. Once you understand the behavior, evaluate the complete responsive layout rather than treating wrapping as an isolated decoration.

Use balance for short, prominent text

The balance value asks the browser to distribute text more evenly across lines. It is particularly useful for page titles, card headings, and short standfirsts. Instead of filling the first line as much as possible, the browser can choose breaks that produce a less lopsided block.

Balanced text does not make every line identical in length, and it does not change the element's declared width. A wide heading box can contain a visually narrower set of balanced lines. That matters when aligning an ornament or another element to what appears to be the text edge.

Browsers can limit balancing to relatively short blocks, and implementation limits can differ. Do not depend on a particular maximum line count across engines. Treat balancing as a progressive enhancement for short text, not as an algorithm that will compose an entire article into equal lines.

The MDN text-wrap reference describes the values and links to compatibility information. The practical introduction on Chrome's text balancing page also explains why headline balancing differs from changing the width until the breaks happen to look better.

Use pretty for prose with awkward endings

The pretty value prioritizes more attractive wrapping, allowing additional layout work compared with ordinary wrapping. A common improvement is avoiding a very short last line in a paragraph. However, precise decisions are browser-defined; do not promise that every paragraph will end with a minimum number of words.

Pretty is not another name for balance. Paragraphs normally benefit from mostly full lines, not equal-length lines throughout. Setting balance on every paragraph can produce a rag that feels artificially narrow or uneven across the page. Pretty is the more appropriate experiment when the problem is paragraph endings rather than headline silhouette.

Apply it first to a restrained reading region and inspect long content. The additional work and the visible effect depend on the engine and text. For frequently changing text or very large documents, test on representative devices instead of assuming that a small demo establishes production cost.

The underlying behavior is defined within CSS Text Level 4. Separate the specification's intent from a particular browser's current algorithm: authors request a wrapping preference, not a fixed list of line-break positions.

Add the enhancement without fragile layout assumptions

Use ordinary wrapping as the fallback. Unsupported declarations are ignored, so the page should remain readable without special scripting. Feature queries can make intent explicit and keep enhanced behavior scoped to the content that benefits from it.

.article-title {
max-inline-size: 24ch;
font-size: 2.25rem;
line-height: 1.15;
text-wrap: wrap;
}

.article-body {
max-inline-size: 68ch;
line-height: 1.6;
}

@supports (text-wrap: balance) {
.article-title,
.card-title {
  text-wrap: balance;
}
}

@supports (text-wrap: pretty) {
.article-body p {
  text-wrap: pretty;
}
}

.article-body a {
overflow-wrap: anywhere;
}

Feature queries detect recognized syntax, not a guarantee of identical output. Compare browser engines if exact line composition matters to the design. Avoid fixed heights on headings and paragraphs; a different line count must not hide text or overlap the next component.

Keep emergency breaking distinct from aesthetic wrapping. The overflow-wrap rule above addresses long links that cannot otherwise fit. It is not a substitute for pretty, and pretty is not a reliable way to prevent overflow from an unbroken identifier. Similarly, hyphenation is a separate choice that depends on language and browser dictionaries.

For more help constraining reading width, see the existing responsive container guide. Good measure usually improves the page more than applying a sophisticated wrapping mode to an unsuitable container.

Test copy changes, language, and reader settings

Create a small comparison page showing ordinary, balanced, and pretty wrapping with identical typography. Include punctuation, a long proper name, a number with units, a link, and translated copy. A visual improvement in English does not establish that the same composition works in another language.

Check narrow widths and enlarged text, then repeat with the fallback font. Different glyph widths can completely change the selected breaks. Do not add hard line breaks to restore one screenshot: manual breaks usually lock a transient desktop decision into every layout.

Some phrases genuinely require nonbreaking treatment, but use that sparingly. Preventing a long product name from breaking can cause horizontal overflow on a phone. If a specific editorial headline needs art direction, document the exception and test it independently rather than embedding that assumption in every heading component.

Evaluate whether the improvement survives future editing. A balanced two-line title today may become four lines next week. Store wrapping as part of a role's typography rules, not as a content-specific height adjustment. The typography category provides related guidance for reviewing the broader scale, measure, and heading hierarchy together.

Finally, let ordinary wrapping remain an acceptable result. The content should never become unreadable because an enhancement is unavailable or produces different breaks. Good typography supports reading across environments; matching line endings pixel for pixel is a different, usually less useful goal.

Key takeaways

• Use balance for short headings that need a more even silhouette.
• Try pretty for paragraph endings, not equal-length prose lines.
• Preserve ordinary wrapping as a usable baseline.
• Treat overflow handling and hyphenation as separate concerns.
• Test real copy across fonts, languages, widths, and browser engines.