You hand-edit headlines to avoid orphaned words. `text-wrap: balance` does it natively.

Here is a small but persistent annoyance in frontend work: <h1>The Practical Guide to Building Resilient Web</h1> The browser broke the headline at "Web" because it ran out of space. Now you have one word sitting alone on the second line. You fix it by shortening a word, tweaking max-width, or inserting a <br> that will be wrong at a different viewport width anyway. This is not a rare edge case. It happens every time a heading is near the container edge, and every fix that works at one width breaks at another. text-wrap: balance is the native solution. What text-wrap: balance does text-wrap: balance tells the browser to distribute the text as evenly as possible across all lines, rather than filling each line greedily until it overflows. The browser picks the break points; you don't guess. h1, h2, h3 { text-wrap: balance; } Before, with the default greedy wrapping: The Practical Guide to Building Resilient Web After, with text