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-wrap
para evitar a quebra de linha após um hífen.
<div>Use only <span style="white-space: no-wrap">eco-friendly</span> soap</div>