Prevenindo Quebras de Linha Após Hífens em HTML e CSS
Resposta Rápida
Para evitar que o texto quebre após um hífen, use a propriedade CSS white-space: nowrap:
/* Prevê a quebra de palavras */
.sem-quebras {
white-space: nowrap;
}Aplique esta classe CSS aos elementos HTML que você deseja afetar:
<!-- Hífen inquebrável -->
<span class="sem-quebras">palavra-seguinte</span>Com esta regra CSS, seu hífen permanecerá sem quebras.
Além disso, o caractere ‑ é utilizado como um hífen inquebrável para evitar a separação do hífen:
<!-- Hífen inquebrável na frase "aqui-ai" -->
<p>Aqui‑lá</p>Utilize ⁠ para proteção invisível contra quebras indesejadas, bloqueando a separação próxima a hífens e outros caracteres. Certifique-se de testá-lo em diferentes navegadores para resultados consistentes.
Métodos Alternativos com Explicações
Entidade HTML: Hífen Inquebrável
Use a entidade HTML ‑ se você quiser garantir que o hífen permaneça inquebrável:
<!-- O hífen permanece firme no lugar -->
Fique‑aqui para sempre.Caracteres Combinantes para Prevenir Quebras
Para garantir que todos os caracteres em um conjunto permaneçam juntos, envolva-os com um caractere invisível de junção, ⁠:
<!-- Vagonetas de trem estão conectadas de modo inquebrável -->
Conexão⁠-⁠palavras.Evitando Tags Obsoletas
É melhor esquecer a tag obsoleta <nobr>. Em vez disso, use CSS:
<!-- Sem <nobr>, sim para CSS -->
Use ao invés:
<nobr>texto-obsoleto</nobr> <!-- Tem valor histórico, mas não é aplicável -->Declaração Correta de Caracteres e DOCTYPE
No início do documento HTML, declare o DOCTYPE e a codificação de caracteres apropriados:
<!-- Entrando no mundo das páginas web elegantes -->
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">Compatibilidade entre Navegadores
Verifique a exatidão da sua solução em vários navegadores:
<!-- Os navegadores se comportam de maneira diferente -->
Teste no Chrome, Firefox, Safari, Edge e outros.Visualização
Evitar quebras após um hífen é como um trem conectado em uma única corrente:
🚂-🚃🚃🚃 (O trem está inteiro)Veja o que acontece com um hífen que não está restrito:
O hífen decidiu fazer uma pausa:
🚂-
🚃🚃🚃O efeito de prevenir quebras em ação:
Com 'white-space: nowrap', nosso hífen está sempre com os vagões:
🚂-🚃🚃🚃O hífen inquebrável ‑ também nos ajuda:
<!-- O hífen segura confiavelmente as palavras -->
O caractere ‑ "aqui-lá" permanecerá juntos.
Sem ‑ pode se tornar "aqui-
lá."Esta é uma condição crítica para criar conteúdo web de alta qualidade com tipografia variada.
Estudos Futuros
Em situações de uso complexo, como texto dinâmico ou texto gerado por usuários, scripts adicionais ou o uso de expressões regulares podem ser necessários.
Recursos Úteis
- white-space - CSS: Cascading Style Sheets | MDN
- Lidando com Palavras Longas e URLs (Quebras Forçadas, Quebras Silábicas, etc.) | CSS-Tricks
- W3Schools Try It Editor
- Módulo de Texto CSS Nível 4
- hyphens - CSS: Cascading Style Sheets | MDN
- Truque de Unidades de Viewport em Dispositivos Móveis | CSS-Tricks
- Configurando Texto na Web por Grade Básica – A List Apart