Search code examples
htmlcsscpu-wordorphan

How to avoid orphan word on a line with css?


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

enter image description here


Solution

  • 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>