Line break after a hyphen

Texts in a div will automatically being wrapped, just like how this sentence works. However, what if you have a hyphen included in a word?

Use only eco-
friendly soap

Above is an example of a linebreak after a hyphen of text, but what I want is the result shown below.

Use only
eco-friendly
soap

How could I do it?

Method 1
Non-line break hyphen
We could simply replace the hyphen with a non-breaking hyphen. The html entity in decimal is:

‑

Method 2
Use CSS
Alternatively, you can use this CSS attribute, no-wrap to prevent the line-break after a hyphen.

<div>Use only <span style="white-space: no-wrap">eco-friendly</span> soap</div>