CSS text-wrap balance: improve short headings without truncation

When to use it

A case summary heading can leave a single short word on its last line at medium width. Balance its wrapping so the lines read as a deliberate title, but retain the full string and let the container grow vertically. The sample applies the property only to the heading and limits the measure; unsupported browsers keep ordinary wrapping. Test a one-line title, a long translated title, and zoom above the default. Do not combine balance with a fixed height or hidden overflow, since that can cut off the title. If an exact wording must fit one line in a compact control, edit the label or layout rather than relying on a balancing algorithm to rescue it.

.case-summary__heading { max-inline-size: 28ch; text-wrap: balance; }

Cost and verification

Balancing can require the browser to evaluate alternate line breaks, so scope it to short strings rather than every paragraph in a large feed. The layout can change when fonts load; inspect the intended and fallback faces. A balanced heading may occupy more vertical space than a tightly packed one, which is preferable to clipping but must be accommodated by the card. Test the title in source order and with assistive technology as ordinary text. Text-wrap does not change the underlying words or provide a shorter accessible name.

Common Mistakes

• Do not apply balance to every long paragraph.
• Do not pair it with fixed height and hidden overflow.
• Do not use it to avoid writing a clear short control label.

Connected lessons

• CSS Property Decisions
• CSS text wrapping and truncation: keep records readable
• CSS line height and measure: protect long-form reading
• CSS font-size-adjust: steady readable fallback text

Further rendering decisions

• CSS text-wrap: pretty: spend line-breaking work where copy merits it