text-wrap: pretty paragraph

Quick implementation

/* HTML: <p class="pretty-para">Your paragraph text here.</p> */

.pretty-para {
  text-wrap: pretty;
}

/* Apply broadly to all body copy */
p {
  text-wrap: pretty;
}

/* Headings benefit from 'balance' instead */
h1, h2, h3 {
  text-wrap: balance;
}

/* Optional: combine with max-width for readable line length */
.content p {
  text-wrap: pretty;
  max-width: 65ch;
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer focused on typographic quality and reading experience.

Goal: Apply text-wrap: pretty to paragraph text to prevent orphaned words on the final line, using a single CSS property with no JavaScript fallback required.

Technical constraints:
- Apply text-wrap: pretty to p elements or a .body-text utility class.
- Use text-wrap: balance on headings (h1–h3) — balance distributes lines evenly, pretty only fixes the last line.
- Do not use pretty on elements with a single line of text — it has no effect there.
- Combine with max-width: 65ch on paragraphs for an optimal reading line length.
- Pair with line-height: 1.6–1.7 for comfortable body copy spacing.

Framework variant (pick one):
A) Vanilla CSS — add to a global stylesheet or a typography utility layer.
B) Tailwind CSS — use the built-in class text-pretty for paragraphs and text-balance for headings.

Edge cases to handle:
- Browsers without support fall back silently to text-wrap: auto — no polyfill needed, just graceful degradation.
- Very short paragraphs (1–2 lines) will show no visible change — that is correct behavior.
- RTL languages: text-wrap: pretty respects the writing-mode and direction properties automatically.
- Do not combine pretty with white-space: nowrap or white-space: pre — those override wrapping behavior entirely.

Return CSS only.

Why this matters in 2026

Typographic orphans — single words stranded alone on the last line of a paragraph — have long been the domain of JavaScript libraries or manual   hacks. The text-wrap: pretty property hands this job entirely to the browser's text layout engine, which can look ahead across multiple lines to find the most visually pleasing break points. In 2026, with broad support across all major engines, there is no longer a reason to reach for JavaScript to fix orphaned words in body copy.

The logic

Unlike text-wrap: balance — which redistributes all lines to equal length and is best for short headings — text-wrap: pretty focuses specifically on the last few lines of a block. The browser applies a multi-line lookahead algorithm to avoid leaving a single short word at the end, adjusting break points earlier in the paragraph if needed. The trade-off is a small amount of additional layout computation, which is why pretty is scoped to paragraphs and balance is preferred for headings where the total line count is low.

Accessibility & performance

Text wrap adjustments are purely visual and have no impact on the underlying DOM order, so screen readers experience no change. The property gracefully degrades — browsers that do not support text-wrap: pretty silently fall back to auto without any JavaScript or feature detection required. The performance cost is minimal: the browser's text layout engine handles the lookahead at render time, and because it only affects the last few lines, the overhead scales with paragraph count rather than total word count. Applying it globally via p { text-wrap: pretty; } is safe and recommended.