Lesson 20 of 30

text-wrap: balance and pretty

Q: A designer flags that a set of card headings sometimes wrap with a single short word stranded alone on the last line. How would you fix this in CSS, and would you apply the same fix to the card's body paragraph underneath the heading?

A strong answer covers: Names text-wrap: balance as the fix for the heading and explains that it redistributes line breaks to even out line lengths without JS or a manual ; Recognizes that balance has a practical line-count cap and is intended for short blocks like headings, not long paragraphs; For the paragraph, reaches for text-wrap: pretty instead of balance, correctly identifying it as the lighter-touch, orphan-avoiding option suited to longer text; Mentions that this degrades gracefully in browsers without support — text just falls back to ordinary greedy wrapping, no fallback CSS required.

A heading that wraps to three lines with one lonely word stranded on the last one used to require either a manually placed line break or a JS library measuring text. text-wrap: balance lets the browser fix it with one line of CSS.

9 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 3

A card heading wraps to three lines with one short word stranded alone on the last line. What's the modern CSS-only fix?

Set text-wrap: balance on the headingReduce the font-size until the text happens to wrap evenlyInsert a manual <br> tag at the desired break point

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on text-wrap: balance and pretty

What interviewers actually ask about this, and what a strong answer has to cover.

A designer flags that a set of card headings sometimes wrap with a single short word stranded alone on the last line. How would you fix this in CSS, and would you apply the same fix to the card's body paragraph underneath the heading?

A strong answer covers

Names text-wrap: balance as the fix for the heading and explains that it redistributes line breaks to even out line lengths without JS or a manual <br>
Recognizes that balance has a practical line-count cap and is intended for short blocks like headings, not long paragraphs
For the paragraph, reaches for text-wrap: pretty instead of balance, correctly identifying it as the lighter-touch, orphan-avoiding option suited to longer text
Mentions that this degrades gracefully in browsers without support — text just falls back to ordinary greedy wrapping, no fallback CSS required

Likely follow-ups

Why doesn't the browser just apply balance to any length of text — what's the actual tradeoff it's protecting against?
If balance had no browser support at all, what would the heading actually look like — is a fallback rule needed, or does it degrade safely on its own?

Practice these with the AI interviewer →

The plain-language idea

Multi-line headings wrap wherever the text happens to run out of room on each line, with zero regard for how the result looks. Most of the time that's fine, but it regularly produces an ugly last line: three long lines followed by one short orphaned word, or a wildly uneven shape where line two is twice the length of line one. There was never a native CSS way to tell the browser "even these lines out" — the only real options were a manually placed <br> (which breaks the moment the text, viewport width, or translation changes) or a JavaScript library that measures rendered text and re-inserts breaks.

text-wrap: balance is a text-wrap value that asks the browser to distribute a block's text across its lines so the lengths come out more even, instead of just greedily filling each line until it runs out of space. It's declarative, it re-balances automatically on resize or content change, and it needs no JavaScript at all.

It comes with a real constraint worth knowing up front: browsers only apply it up to a small number of lines (typically capped around four to six) for performance reasons — balancing text is more computationally expensive than normal line-breaking, so browsers intentionally don't apply it to long, many-line blocks. That makes it a heading tool, not a paragraph tool.

See it in a real thing: a card heading that avoids a stranded last word

/* Before: wraps wherever the text runs out of room */
.card-title {
  font-size: 1.5rem;
  max-width: 20ch;
}

/* After: the browser evens out the line lengths */
.card-title {
  font-size: 1.5rem;
  max-width: 20ch;
  text-wrap: balance;
}

With a heading like "Modern CSS for Working Frontend Developers" constrained to a narrow card, the unbalanced version might wrap to "Modern CSS for Working Frontend" on one line and a lonely "Developers" on the next. text-wrap: balance redistributes the break points so the two (or three) lines come out closer in length — something like "Modern CSS for Working" / "Frontend Developers" — without touching the markup or the font size.

What people usually miss

Watch out

balance silently stops helping past a handful of lines. Browsers cap how many lines they'll attempt to balance, so applying it to a long paragraph either does nothing or only affects part of it — reach for it on headings, pull quotes, and short labels, not on body copy.
pretty and balance solve different problems, not the same problem at two strengths. balance reshapes an entire short block's line lengths; pretty only tries to prevent a lone stranded word at the very end. Reaching for balance on a paragraph to fix one orphan is using the wrong tool for that job.
This is newly available, not something to assume as a universal baseline yet. Treat unsupported browsers as getting the same default greedy wrapping they'd get without any text-wrap value at all — it degrades gracefully with no fallback needed, since an unbalanced heading is exactly what shipped before this property existed.
It only changes where lines break, not the total number of lines in most cases — it's not a truncation or line-clamping tool, and it doesn't change font size, so it composes safely with existing heading styles without needing to re-tune anything else.

Why this matters in interviews

"How would you fix a heading that wraps with one word stranded alone on the last line?" tests whether a candidate reaches for the modern, zero-JS text-wrap: balance fix or defaults to an outdated manual <br> hack that breaks the moment the content or viewport changes.