Don't break words along hyphens

I was working on a website today and I noticed the word long-term got split along the hyphen into long- and then term on the next line. This is really not what I want.

First thing I thought would solve my problems is the white-space CSS property, but this is not what it does. Although you could set it to nowrap, but with longer texts like in my paragraph, this will just overflow. This is only useful for titles maybe.

The solution turned out to be the word-break property.

p {
    word-break: keep-all;
}

This will only split along whitespace characters, which is precisely what I want. With extremely long words it will still overflow, but my text is in english, so it should be fine.

Tailwind variant:

<p class="break-keep">Thanks for reading!</p>