How to avoid orphan word on a line with css?

Question

What I mean with orphans word is a single word on a line. Possible with help of CSS to avoid any line with only one word?

For example SERUM is an orphand word:

ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT BODY
SERUM

It should look like this instead

ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT
BODY SERUM

Answer 1

A quick and easy way to prevent two words from breaking is to insert a non breaking space   between the words

ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT BODY SERUM

It won't be visible on the front end but those words will stay together even if there enough space for just one of them.

<h2>ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT BODY&nbsp;SERUM</h2>

Answer 2

This does not have the best browser support yet, but you can use text-wrap: pretty; to avoid orphans.

CSS

p {
  text-wrap: pretty;
}

HTML

<p>ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT
BODY SERUM</p>