Text Wrap

Your hero title ends with one word on its own line. You tried a smaller font. The orphan stayed. The browser broke the line that way on purpose.

The Principle

Text wrappingHow content breaks onto new lines when it reaches the edge of its container. is how content flows at line endings. Browsers use a greedy algorithm: fill each line, then move on. That often strands one word on the last line of a heading. text-wrapCSS property that controls how text breaks across lines. Values like balance and pretty redistribute breaks for cleaner shapes. overrides that behavior.

The Rule I Follow

I set text-wrap: balanceRedistributes lines in short blocks like headings so no line is dramatically shorter than the rest. on headings and text-wrap: prettyPrevents a single word from sitting alone on the last line of a paragraph. on body text. Both only intervene when the layout would look obviously awkward.

Try It Yourself

Flip balance on the heading and pretty on the paragraph. Watch the last lines change.

With both on, the heading lines even out and the paragraph loses its orphan.

The Mistake I'd Avoid

Forcing manual line breaks to make one screen look perfect. They'll almost always fall apart on another device.

Remember This

Design for how text wraps, not how it looks on your screen.

h1, h2, h3, h4 {
text-wrap: balance; /* even line lengths on short headings */
}

p {
text-wrap: pretty; /* avoid orphaned last words */
}

h1, h2, h3, h4 {
text-wrap: balance; /* even line lengths on short headings */
}

p {
text-wrap: pretty; /* avoid orphaned last words */
}