CSS - How to prevent line-break at hyphen

What we see.

There is a fifth state of matter called the Bose-
Einstein condensate.

What we want.

There is a fifth state of matter called the
Bose-Einstein condensate.

You can prevent the browser from inserting a line break in a few ways.

You can use the HTML element nobr.

There is a fifth state of matter called the <nobr>Bose-Einstein</nobr> condensate.

You can use the CSS property white-space: nowrap;

There is a fifth state of matter called the <span>Bose-Einstein</span> condensate.

span {
    white-space: nowrap;
}

You can use a non-breaking hyphen.

There is a fifth state of matter called the Bose&#8209;Einstein condensate.

Note: In this particular example, we should use an en dash and not a hyphen. The en dash is used to join two names in a phrase, and is slightly longer than the hyphen.

Hyphen  -
En dash –
Em dash —

Hyphen  -
En dash &ndash;
Em dash &mdash;