Propriedade CSS hyphens
Use a propriedade CSS hyphens para controlar a hifenização de palavras. Conheça os valores e veja exemplos.
A propriedade CSS hyphens controla como as palavras são divididas com hifens quando o texto passa para uma nova linha. Hifenização significa quebrar uma palavra longa em um ponto adequado e adicionar um hífen (-) no final da linha, para que o texto preencha colunas estreitas de forma mais uniforme, em vez de deixar grandes espaços ou permitir que uma palavra longa ultrapasse o contêiner.
Esta página cobre os três valores que a propriedade aceita (none, manual e auto), o papel do atributo lang, os caracteres de hífen suave e rígido que podem ser inseridos manualmente, e como hyphens se relaciona com outras propriedades de quebra de texto.
Por que e quando usar hyphens
A hifenização é mais importante em contêineres estreitos — barras laterais, layouts móveis, texto em múltiplas colunas, ou qualquer elemento com width pequeno. Sem ela, uma única palavra indivisível (uma URL longa, um nome químico, um composto alemão) pode ultrapassar sua caixa ou forçar uma margem direita irregular com espaços em branco incômodos. Ativar hyphens: auto permite que o navegador quebre essas palavras em pontos válidos e mantém o texto justificado ou estreito com boa aparência.
Normalmente, hyphens é usado junto com text-align: justify, ou sempre que o conteúdo é gerado pelo usuário e não é possível prever o comprimento das palavras.
hyphens: auto só funciona quando o idioma do elemento é conhecido. Defina-o com o atributo lang (por exemplo <html lang="en">), pois o navegador precisa do dicionário de hifenização do idioma para decidir onde as quebras são permitidas. Sem lang, auto se comporta como manual.
As regras de hifenização não estão explicitamente definidas na especificação, portanto os pontos de quebra exatos podem variar de navegador para navegador.
| Valor Inicial | none |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Sim. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | Object.style.hyphens = "none"; |
Sintaxe
Sintaxe da propriedade CSS hyphens
hyphens: none | manual | auto | initial | inherit;Exemplo da propriedade hyphens:
Exemplo da propriedade CSS hyphens com os valores none, manual e auto
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 55px;
border: 1px solid #666;
}
p.none {
hyphens: none;
}
p.manual {
hyphens: manual;
}
p.auto {
hyphens: auto;
}
</style>
</head>
<body>
<h2>Hyphens property example</h2>
<h3>none</h3>
<p class="none">An extreme­ly lengthy sentence</p>
<h3>manual</h3>
<p class="manual">An extreme­ly lengthy sentence</p>
<h3>auto</h3>
<p class="auto" lang="en">An extreme­ly lengthy sentence</p>
</body>
</html>Resultado
No exemplo dado, os três valores estão incluídos para que se possa ver as diferenças.
Prefixos de navegador não são mais necessários para navegadores modernos.
Oportunidades de quebra de linha
Com a ajuda dos dois caracteres Unicode abaixo, podemos definir manualmente possíveis pontos de quebra de linha dentro do texto:
U+00AD (SHY/Hífen suave)
Este caractere é renderizado de forma invisível. Ele indica um local onde o navegador deve quebrar a palavra, caso a hifenização seja necessária. Para inserir SHY, use .
U+2010 (HYPHEN/Hífen rígido)
Este caractere indica uma possibilidade de quebra de linha visível. O hífen é renderizado mesmo quando a linha não é quebrada nesse ponto.
Valores
| Valor | Descrição |
|---|---|
| none | Sem hifenização. As palavras não são quebradas nas quebras de linha, mesmo que os caracteres sugiram pontos de quebra. |
| manual | As palavras são quebradas apenas para quebra de linha onde há oportunidades de quebra dentro da palavra. As palavras são hifenizadas apenas em ‐ ou ­. |
| auto | O navegador quebra automaticamente as palavras nos pontos de hifenização adequados. As palavras são hifenizadas onde o algoritmo decide. O comportamento do valor auto depende do idioma. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas de quebra de texto
hyphens é uma das várias propriedades CSS que determinam onde e como o texto pode ser quebrado. Elas são frequentemente combinadas:
- overflow-wrap — permite que o navegador quebre uma palavra longa somente quando ela ultrapassaria o contêiner, sem inserir um hífen.
- word-break — controla se as palavras podem ser quebradas entre quaisquer caracteres (útil para texto CJK ou strings longas).
- word-wrap — o alias legado de
overflow-wrap. - white-space — decide se sequências de espaços em branco são contraídas e se o texto é quebrado.
- line-break — ajusta as regras de quebra de linha, principalmente para idiomas asiáticos.
Use hyphens para adicionar hifens em pontos de quebra válidos, e overflow-wrap / word-break como uma rede de segurança para strings sem ponto de hifenização válido.
Suporte dos navegadores
hyphens: auto é suportado em todos os navegadores modernos. Versões mais antigas do Safari e do Edge pré-Chromium exigiam prefixos de fornecedor (-webkit-hyphens, -ms-hyphens), mas eles não são mais necessários para os navegadores atuais.