Wrapping

Your hero title has one word hanging alone on the last line. You've adjusted the font size, changed the padding, tweaked the max-width. None of it held. The problem isn't size. It's how the browser breaks lines.

Browsers break lines at the last word that fits. It doesn't know that putting three words on line one and one word on line two looks wrong. That's not negligence. That's how greedy line-breaking algorithmsAn algorithm that makes the locally optimal choice at each step. In line-breaking, it places as many words as possible on each line without looking ahead — which can leave a single word orphaned on the last line. work.

Toggle to balance. The heading's orphanA single word appearing alone on the last line of a text block. Orphaned words create visual imbalance and are a typographic error to avoid. moves up to join the previous line. Neither change touches any other line.

text-wrap: balance tells the browser to make all lines roughly equal length. On a heading with four or five words, that means two balanced lines instead of a long one followed by a short one. It won't help headings longer than six lines, but headings shouldn't be six lines anyway.

h1, h2, h3, h4 {
text-wrap: balance;
}

p, li, blockquote {
text-wrap: pretty;
}

h1, h2, h3, h4 {
text-wrap: balance;
}

p, li, blockquote {
text-wrap: pretty;
}

text-wrap: pretty is different. It doesn't balance all lines. It just prevents the last line from holding a single word. The algorithm looks ahead to avoid orphans without changing the rest of the paragraph layout. It's slower than balance, so it belongs on body text, not headings you render hundreds of at once.

text-wrap: balance is Chrome 114+, Firefox 121+, Safari 17.4+. text-wrap: pretty is Chrome 117+, Firefox 128+, Safari 18+. Both degrade silently to the default greedy algorithm on older browsers.

Long words and URLs

text-wrap only handles normal word boundaries. A long URL, a CSS property name, or a compound technical term won't break. It overflows.

Toggle to break-word. The URL in the reference card wraps to a new line instead of overflowing the container. The prose paragraph is unaffected because none of those words are long enough to trigger a break.

p, li, .prose {
overflow-wrap: break-word;
}

p, li, .prose {
overflow-wrap: break-word;
}

overflow-wrap: break-word breaks within a word only when it would overflow. It doesn't break short words, so normal reading rhythm is unaffected.

word-break: break-all is a different property that breaks at any character boundary regardless of overflow. It makes every long word hyphenate mid-word, including words that don't need it. Don't use it on prose.

Hyphenation

For prose-heavy pages, hyphens: auto improves line balance alongside text-wrap: pretty. The browser inserts soft hyphensDiscretionary hyphenation points inserted by the browser's hyphenation engine at linguistically correct syllable boundaries. They are invisible until the word needs to break across a line. at linguistically correct break points. It requires a lang attribute on the element or an ancestor.

/* Requires lang="en" on the element or an ancestor */
.prose {
hyphens: auto;
overflow-wrap: break-word;
text-wrap: pretty;
}

/* Requires lang="en" on the element or an ancestor */
.prose {
hyphens: auto;
overflow-wrap: break-word;
text-wrap: pretty;
}