Automatically remove orphans from paragraph text blocks - CSS

In this post, I describe how to use CSS to automatically remove orphans from the end of paragraphs or text blocks.

An orphan is a single word that sits on its own at the bottom of a paragraph and should be avoided if possible.

Resolution

To automatically remove orphans using CSS, use the text-wrap property with the value pretty, e.g.

p {
    text-wrap: pretty;
}

Orphans are now automatically removed: 

This paragraph of text is long enough to wrap onto two lines and the last word is no orphan.

Related Links

- You can check browser support here: https://caniuse.com/?search=text-wrap%3A%20pretty