CSS - Caractere de Hifenização

João E. -

Sintaxe e Uso

A propriedade CSS hyphens controla a hifenização do texto em um elemento. Ela aceita três valores: none, manual e auto.

  1. none: Este é o valor padrão. Quando definido como none, a hifenização é desativada e as palavras não serão hifenizadas, mesmo que excedam o espaço disponível.

  2. manual: Quando definido como manual, a hifenização é ativada, mas só se aplica a palavras manualmente hifenizadas usando o caractere de hífen suave (­). Isso permite um controle específico sobre quais palavras devem ser hifenizadas.

  3. auto: Quando definido como auto, o navegador hifeniza automaticamente as palavras conforme necessário para otimizar o layout do texto com base nas regras linguísticas e tipográficas.

Exemplo da sintaxe

.element {
  hyphens: auto;
}

O suporte dos navegadores para esta propriedade varia. A maioria dos navegadores modernos a suporta, mas algumas versões mais antigas podem não suportar. Para verificar a compatibilidade com diferentes navegadores, você pode consultar recursos online como Can I Use (https://caniuse.com/#feat=css-hyphens).

Ao usar esta propriedade, é recomendável também especificar o atributo lang no elemento HTML ou usar a propriedade CSS lang para indicar o idioma do seu conteúdo de texto. Isso ajuda a aplicar as regras corretas específicas para aquele idioma.

Lembre-se de que esta propriedade só se aplica a elementos de nível de bloco e elementos inline-block. Ela não funciona em elementos inline, a menos que tenham uma largura específica definida.

Hifenização com CSS

Configurando a Hifenização

Para ativar a hifenização automática de texto em um elemento, você pode usar a propriedade hyphens com o valor auto. Quando definido como auto, o navegador adicionará automaticamente hifens às palavras conforme necessário para quebrá-las entre linhas, melhorando o layout e a legibilidade do texto.

Exemplo: Configurando a Hifenização

p {
  hyphens: auto;
}

Especificando a Zona de Hifenização

A propriedade hyphenate-limit-zone permite definir a largura da zona de hifenização, que é a área próxima à borda do contêiner onde os hifens são permitidos. Esta propriedade aceita um valor de comprimento.

Exemplo: Especificando a Zona de Hifenização

p {
  hyphens: auto;
  hyphenate-limit-zone: 50px;
}

Limitando Hifens Consecutivos

Para controlar o número mínimo de caracteres antes e depois de um hífen, você pode usar a propriedade hyphenate-limit-chars. Ela aceita três valores: caracteres mínimos antes de um hífen, caracteres mínimos após um hífen e um terceiro valor opcional para o comprimento mínimo da palavra elegível para quebra.

Exemplo: Limitando Hifens Consecutivos

p {
  hyphens: auto;
  hyphenate-limit-chars: 4 3 8;
}

Controlando Quebras de Hifenização

A propriedade hyphenate-limit-lines permite limitar quantas linhas consecutivas podem terminar com um ponto de quebra. Isso ajuda a evitar muitas linhas quebradas em sequência.

Exemplo: Controlando Quebras de Hifenização

p {
  hyphens: auto;
  hyphenate-limit-lines: 2; 
}

Neste exemplo, no máximo duas linhas consecutivas terminarão com quebras. Se outra linha precisar de uma, ela será movida.