A heading that breaks where a typesetter would
Every snippet works, the caveat is the part nobody writes down
Every snippet works, the caveat is the part nobody writes down
CaveatBrowsers stop balancing past roughly six lines and quietly do nothing beyond that. It is a headline tool: put it on body copy and you pay for the layout pass and get no result.
FallbackUnsupported engines wrap normally, so the heading must already read acceptably without it. Treat it as polish, never as the thing holding the layout together.
h1, h2, h3 {
text-wrap: balance; /* headings only */
}Published
Questions
Why is text-wrap: balance not doing anything?
Usually the text is too long: browsers skip balancing past a small line count, roughly six lines in Chromium. A heading with no width limit that fits on one line has nothing to balance either, and a white-space value like nowrap stops it from wrapping at all.
Should I use text-wrap: balance or pretty?
balance is for headings: it evens out every line and gives up on long blocks. pretty is meant for paragraphs, where it mainly avoids a single orphaned word on the last line and costs less on long text.
Why does a balanced heading leave empty space on the right?
Balancing shortens the lines but leaves the box as wide as before, so the space that used to sit after the last word now sits after every line. If a border or background has to hug the text, add width: fit-content.