How to avoid orphan word on a line with css?-CodePudding

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

CodePudding user response：

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&nbsp;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>

CodePudding user response：

You can do it with white-space: nowrap

span {
  white-space: nowrap;
}

<h2>ECSTASY OF EXISTENCE FIRMING ANTIOXIDANT <span>BODY SERUM</span></h2>