Fix Ragged Text Lines with `text-wrap: balance`
Fix awkward text wrapping in headings. text-wrap: balance tells the browser to make each line roughly the same length, improving readability. Use it for short text blocks like titles, but know it's limited to a few lines due to performance costs.
Why it exists
Default text wrapping can create visually jarring layouts, especially in headings, with long lines followed by very short ones. This raggedness hurts readability and looks unprofessional. text-wrap: balance was created to solve this typographic problem automatically, without requiring manual line breaks.
The mental model
Think of text-wrap: balance as a smart typesetter for your headings. Instead of just breaking a line when it runs out of space, it looks at the entire text block and tries to make every line roughly the same length. It trades a small amount of computation for a much more polished and balanced layout.
How it works
When you apply text-wrap: balance, the browser's rendering engine performs a more complex calculation than its default wrapping algorithm. It analyzes the text to find break points that result in evenly distributed lines. Because this is computationally expensive, browsers impose a limit on the number of lines it will apply to (six or less for Chromium, ten or less for Firefox) to prevent performance degradation. It is not intended for large blocks of text.
When to use it
Use text-wrap: balance for short, prominent text where visual presentation is key. This includes page titles, section headings (h1–h6), blockquotes, and short captions. It is a quick and effective way to improve the typographic quality of a user interface with a single line of CSS.
When not to use it
Avoid using text-wrap: balance on long paragraphs or large blocks of body text. The performance cost is not justified, and browsers will ignore it beyond the built-in line limit anyway. For fine-tuning body text to avoid orphans, the text-wrap: pretty value is a more appropriate, though still costly, choice. If content is being actively edited, text-wrap: stable is better, as it prevents reflow of preceding lines.
One canonical example
A website's main hero heading, like "The Ultimate Solution for Modern Enterprises," might wrap by default with "Enterprises" on its own awkward line. Applying text-wrap: balance; to the heading element would encourage the browser to re-flow it into two more even lines, such as "The Ultimate Solution for" and "Modern Enterprises," creating a stronger, more readable visual block.
Interview question
For which scenario is `text-wrap: balance` most appropriately used?
- a.To ensure all paragraphs on a page have perfectly equal line lengths for consistency.
- b.To prevent single words from appearing on their own line at the end of a paragraph.
- c.To significantly reduce the computational load of text rendering on complex pages.
- d.To improve the visual balance of short, prominent text elements like headings.Correct
Why? this is the answer
The card states that `text-wrap: balance` is for "short, prominent text where visual presentation is key," such as headings, to make lines roughly the same length. It is not for reducing computational load; in fact, it is computationally expensive, which is why it's limited to a few lines.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #css
- #typography
- #layout
- #design systems
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles