Propriedade hyphens
Última atualização: 2026-09-13
hyphens Propriedade hyphens
A propriedade hyphens do CSS controla se o navegador usa hífens (-) para quebrar palavras dentro das linhas, comumente usada em idiomas polissílabos como o inglês. Com a hifenização automática ativada, o navegador insere hífens em posições adequadas com base em um dicionário do idioma, para que o texto seja envolvido de forma mais natural na borda do contêiner e as lacunas irregulares diminuam.
| Categoria | |
|---|---|
| Valor Inicial | manual |
| Herdado | Sim |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
hyphens: none | manual | auto;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | manual | auto | Palavra-chave | Comportamento da hifenização |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| hyphens | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： A hifenização automática precisa de um atributo lang no HTML (por exemplo, lang="en") para que o navegador consulte o dicionário do idioma quanto aos pontos de quebra.
Importante： Use (hífen suave) para marcar manualmente as posições de quebra permitidas; o hífen só aparece quando o navegador realmente precisa quebrar ali.
❓ Perguntas Frequentes
QA propriedade hyphens tem algum efeito sobre texto chinês no CSS?
AO chinês não tem conceito de fronteiras de palavras, então o hyphens basicamente não tem efeito sobre texto chinês. A quebra de texto chinês é normalmente controlada com word-break ou overflow-wrap.
QQual é a diferença entre os valores manual e auto do hyphens?
Amanual só quebra nas posições que você marcou explicitamente com um hífen suave (); auto deixa o navegador escolher as posições de quebra com base no dicionário do idioma — mais inteligente, mas exige o atributo lang correto.
QComo faço o texto em inglês hifenizar automaticamente com a propriedade hyphens?
ADefina hyphens: auto e certifique-se de que o HTML tenha o atributo lang correto (por exemplo, lang="en"); o navegador então adiciona hífens no final das palavras de acordo com o dicionário. O hyphens só quebra quando uma palavra não cabe e funciona melhor com text-align: justify.
QQual é o suporte atual dos navegadores para a propriedade CSS hyphens?
ATodos os navegadores modernos oferecem suporte, mas o iOS Safari exige o prefixo -webkit-hyphens. Como depende de dicionários de idioma, o mesmo texto pode quebrar em posições diferentes em ambientes de idiomas distintos.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
