CSS text-wrap

I am always irked by the last word of a sentence or heading wrapping onto the next line. I even edit texts before I send them to avoid it 😅. text-wrap: pretty is what I’ve been waiting for!

I’ve manually added nbsp; in the past a handful of times, but that’s a bad solution for a few reasons: it isn’t responsive—you can’t control which viewports will cause orphans or know when users will zoom/update their base font size; it’s rather manual—you’d have to update every time you change copy; and it’s not semantic, which may harm accessibility.

There’s also text-wrap: balance, which distributes words evenly across lines. I am using that declaration for headings.

The browser support isn’t perfect, but the fallback is just the status quo, so it’s safe to use.

If you’d like to dig deeper, there’s a Google doc written by the engineer who designed this, Koji Ishii.