A CSS native way to prevent orphan text
In typography, an orphan or widow is a single word on its own line.
It can look particularly unpleasing with headings, and is hard to “plan for” on the web, where people view your site on a wide range of viewport sizes.
You can avoid them by manually added a non-breaking space ( ) before the second and last word in every sentence, but doing that manually is madness.
<h2>How to use the Array.prototype.map() method to transform an array.</h2>Over the years, people have come up with various techniques for automating this.
Back in 2019, Chris Coyier wrote about a jQuery snippet you can use. That same year, David Walsh shared a PHP technique.
Fast-forward 14 years, and CSS has gotten a lot more capable.
The text-wrap property has a value I didn’t know about until recently, pretty.
Results in the same behavior as
wrap, except that the user agent will use a slower algorithm that favors better layout over speed. This is intended for body copy where good typography is favored over performance (for example, when the number of orphans should be kept to a minimum).
Because this is slower to run, it’s generally recommended you only use it for headings rather than every piece of content on the page.
h1, h2, h3, h4, h5, h6 {
text-wrap: pretty;
}It also currently only works in Chromium browsers, unfortunately. I’m hopeful that Firefox and Safari support will happen sometime in the future.
What’s nice about CSS enhancements, though, is that unlike most JavaScript, they’re progressive out-of-the-box.
Text will still render just fine in Firefox, just with the occasional orphan. This is 100 percent safe to use today.