HTML - When to use  

In summary

A text span with a normal (breaking) space will be split to insert a line break.

Scientists estimate that there are 100 billion stars in the galaxy.

A text span with a non-breaking space will not be split. The line break will be moved earlier in the line.

Scientists estimate that there are 100 billion stars in the galaxy.

In detail

  is the HTML character entity for a non-breaking space.

1 A text span without  

In the paragraph below, we use CSS to highlight the text "100 billion".
Note the space character between 100 and billion.
So far so good, everything looks fine.

Scientists estimate that there are 100 billion stars in the galaxy.

Scientists estimate that there are <span class="count">100 billion</span> stars in the galaxy.

 .count { 
     background-color: black; 
     color: white; 
     border-radius: 10px; 
 }

2 Using a smaller bounding box

If we make the bounding box a little smaller (below), we see a problem.
In order to word-wrap the line, the browser must insert a line-break between 100 and billion.

Scientists estimate that there are 100 billion stars in the galaxy.

3 A text span with  

To exclude this location as a line break opportunity, we can replace the space character with a non-breaking space.

100 billion -> 100 billion

Scientists estimate that there are 100 billion stars in the galaxy.

Is there a CSS alternative to  ?

Yes, you can use the CSS property: white-space: nowrap;

Scientists estimate that there are 100 billion stars in the galaxy.

Scientists estimate that there are <span class="count nowrap">100 billion</span> stars in the galaxy.

 .count { 
     background-color: black;
     color: white;
     border-radius: 10px;
 }
 .nowrap {
     white-space: nowrap;
 }

HTML - When to use &nbsp;

HTML - When to use