Quebra de linha após um hífen

Textos em um div serão automaticamente quebrados, assim como esta frase funciona. No entanto, e se você tiver um hífen incluído em uma palavra?

Use only eco-
friendly soap

Acima está um exemplo de quebra de linha após um hífen de texto, mas o que eu quero é o resultado mostrado abaixo.

Use only
eco-friendly
soap

Como eu poderia fazer isso?

Método 1
Hífen sem quebra de linha
Poderíamos simplesmente substituir o hífen por um hífen sem quebra. A entidade html em decimal é:

‑

Método 2
Usar CSS
Como alternativa, você pode usar este atributo CSS no-wrappara evitar a quebra de linha após um hífen.

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