text-wrap Demo

Q: When should I use balance vs pretty?

Use balance for headlines, titles, and short text blocks where you want every line to be roughly the same width. The browser recalculates line breaks so no single line is significantly longer or shorter than the others. Use pretty for body text and paragraphs — it focuses on avoiding orphans (a lone word on the last line) without the performance cost of fully rebalancing every line. In practice, apply balance to headings and pretty to paragraphs for the best overall typographic result.

Q: Does text-wrap affect performance?

balance has a slight performance cost because the browser must try multiple line-break configurations to find the most balanced layout. For this reason, browsers cap balance at around four to six lines — if the text exceeds that limit, it falls back to normal wrapping. pretty is lighter because it only optimizes the last few lines. For typical web pages with a handful of balanced headings and pretty paragraphs, the performance impact is negligible and not something you need to worry about.

Q: Does text-wrap: balance work on long paragraphs?

Browsers limit balance to approximately 4-6 lines for performance reasons. If text exceeds this limit, it falls back to normal wrapping. Use pretty for longer text blocks instead.

Q: Can I use text-wrap and white-space together?

text-wrap controls how line breaks are chosen when text wraps. white-space controls whether text wraps at all. white-space: nowrap prevents wrapping entirely, making text-wrap irrelevant. They serve different purposes.

Q: Is text-wrap: pretty the same as text-wrap: balance?

No, balance makes all lines roughly equal width, which is ideal for short text like headings. pretty only adjusts the last few lines to avoid orphans (a single word on the last line), making it suitable for body text with minimal performance cost.

Beautiful typography on the web has always been a struggle — especially headlines that break awkwardly across lines, leaving a single word stranded on the last line. The CSS text-wrap property finally gives developers control over how text breaks. text-wrap: balance evenly distributes text across all lines (perfect for headlines), while text-wrap: pretty optimizes the last line of paragraphs to avoid orphans. This demo shows all five values side by side so you can see exactly what each does to your text.

Sample Text Container Width: 400px Font Size: 24px

Direct CSS

CSS Variables

What is text-wrap?

The CSS text-wrap property controls how text is distributed across lines within a container. The default value, auto, lets the browser wrap text using its standard greedy algorithm — filling each line as much as possible before moving to the next. This algorithm is fast but can produce visually unbalanced results, especially for short text blocks where the last line ends up with just one or two words. The text-wrap property gives developers control over the line-breaking algorithm itself, allowing them to choose strategies optimized for different kinds of content.

The balance value redistributes text so that all lines are roughly equal in length, which is ideal for headlines and short blocks of text. Instead of greedily filling each line, the browser tries multiple configurations and picks the one where lines are most evenly distributed. The pretty value uses a more sophisticated algorithm that looks ahead to avoid orphans (a single word on the last line) and is designed for body paragraphs. Unlike balance, which restructures all lines, pretty only adjusts the last few lines, making it much lighter computationally and suitable for longer text.

The stable value ensures text above the editing cursor does not reflow when the user types, making it perfect for contenteditable elements and live text editors. Without stable, typing a word on one line can cause text on previous lines to reflow, creating a disorienting visual jump. Finally, nowrap prevents all wrapping, forcing text onto a single line regardless of container width. This is useful for navigation items, labels, and other UI elements where text should never break.

How to use this tool

Enter your sample text in the textarea, then adjust the container width and font size using the sliders. The preview area shows your text rendered with all available text-wrap values side by side, making it easy to compare the visual impact of each option. Pay attention to how the last line behaves differently across the values — this is where the most visible differences appear.

For best results, test with realistic content that matches what your site will actually display. Headlines with 5-15 words show the biggest difference between balance and auto. Paragraphs with 2-4 sentences highlight the orphan-prevention behavior of pretty. Use the width slider to simulate different viewport sizes and see how each wrapping mode adapts. Copy the generated CSS directly into your stylesheet — no build tools or JavaScript required.

Practical examples

Balanced headings for marketing pages

Marketing headlines often break awkwardly across lines, leaving a single short word on the last line. Applying text-wrap: balance ensures even distribution across all lines, giving headlines a polished, professional appearance without manual line breaks.

h1, h2, h3 {
  text-wrap: balance;
}

/* Example: a hero section headline */
.hero-title {
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 800;
  max-width: 20ch;
  text-wrap: balance;
}

Pretty paragraphs for blog content

Blog articles and long-form content benefit from text-wrap: pretty, which prevents orphaned words at the end of paragraphs. The browser adjusts only the last few lines, so performance remains excellent even on text-heavy pages.

.article-body p {
  text-wrap: pretty;
  max-width: 65ch;
  line-height: 1.7;
}

/* Apply to all prose content */
.prose {
  text-wrap: pretty;
}

Stable text for interactive UI labels

In editable content areas, text reflow while typing can be distracting and disorienting. The stable value prevents lines above the cursor from reflowing, keeping the editing experience smooth and predictable.

[contenteditable] {
  text-wrap: stable;
  min-height: 200px;
  padding: 1rem;
  border: 1px solid #334155;
  border-radius: 8px;
}

/* Also useful for live search inputs with wrapping text */
.search-input {
  text-wrap: stable;
}

Common patterns and best practices

Integrating text-wrap into your stylesheet is straightforward, but a few patterns will help you get the best results:

Apply text-wrap: balance globally to all heading levels (h1 through h6) as a baseline. This single rule dramatically improves typography across your entire site with no downside for short headings.
Use text-wrap: pretty on paragraph elements and prose containers. It has minimal performance impact and prevents the most common typographic flaw in body text: the lone orphan word.
Combine text-wrap with max-width set in ch units to control the measure (line length). A max-width: 65ch on paragraphs creates a comfortable reading line length that complements the wrapping algorithm.
Do not apply balance to long paragraphs. Browsers intentionally limit it to approximately 4-6 lines for performance reasons. If text exceeds this limit, it silently falls back to normal wrapping, which can lead to inconsistent results.
Use text-wrap: stable specifically for contenteditable elements and any UI where text is dynamically changing (such as live preview areas or collaborative editing interfaces).
Test at multiple viewport widths. The visual impact of balance and pretty varies significantly depending on container width, font size, and content length.

Browser support

The text-wrap: balance value is supported in all major browsers as of 2024: Chrome 114+, Firefox 121+, and Safari 17.5+. The text-wrap: pretty value has slightly more recent support, arriving in Chrome 117+ and Safari 17.5+, with Firefox support in development. The stable value is supported in Chrome 133+ and is still being adopted by other browsers.

Since text-wrap is a progressive enhancement by nature — the fallback is simply the browser's default wrapping behavior — you can use it today without any polyfills or feature detection. Browsers that do not support the property will ignore the declaration and render text with standard greedy line breaking, which is the behavior developers have worked with for decades. There is no visual breakage, just a missed optimization.

FAQ

When should I use balance vs pretty?

Use balance for headlines, titles, and short text blocks where you want every line to be roughly the same width. The browser recalculates line breaks so no single line is significantly longer or shorter than the others. Use pretty for body text and paragraphs — it focuses on avoiding orphans (a lone word on the last line) without the performance cost of fully rebalancing every line. In practice, apply balance to headings and pretty to paragraphs for the best overall typographic result.

Does text-wrap affect performance?

balance has a slight performance cost because the browser must try multiple line-break configurations to find the most balanced layout. For this reason, browsers cap balance at around four to six lines — if the text exceeds that limit, it falls back to normal wrapping. pretty is lighter because it only optimizes the last few lines. For typical web pages with a handful of balanced headings and pretty paragraphs, the performance impact is negligible and not something you need to worry about.

Does text-wrap: balance work on long paragraphs?

Browsers limit balance to approximately 4-6 lines for performance reasons. The balancing algorithm needs to evaluate multiple possible line-break configurations, and this cost grows with the number of lines. If text exceeds the browser's internal limit, it silently falls back to normal (greedy) wrapping. This means you should not rely on balance for body paragraphs or any text longer than a few lines. Use text-wrap: pretty for longer text blocks instead — it provides orphan prevention without the full rebalancing cost.

Can I use text-wrap and white-space together?

text-wrap controls how line breaks are chosen when text wraps. white-space controls whether text wraps at all. If you set white-space: nowrap, wrapping is disabled entirely, and text-wrap becomes irrelevant because there are no line breaks to optimize. The two properties serve different purposes and operate at different levels: white-space determines if wrapping happens, while text-wrap determines how it happens. You can use white-space: pre-wrap alongside text-wrap: balance if you want to preserve whitespace while also balancing line lengths.

Is text-wrap: pretty the same as text-wrap: balance?

No, they use fundamentally different algorithms. balance makes all lines roughly equal width by trying multiple line-break configurations across the entire text block, which is ideal for short text like headings (typically under 4-6 lines). pretty only adjusts the last few lines to avoid orphans — a single word stranded on the final line — making it suitable for body text with minimal performance cost. In most stylesheets, you should use both: balance on headings and pretty on paragraphs.