CSS - Hifenização
A Propriedade hyphens
A propriedade CSS hyphens é usada para controlar como as palavras devem ser hifenizadas quando o texto se estende por várias linhas. Ela informa ao navegador se e como hifenizar palavras ao quebrar o conteúdo do texto em linhas. A propriedade hyphens aceita três valores possíveis: none, manual e auto.
O valor padrão da propriedade hyphens é manual, o que significa que as palavras serão quebradas apenas em quebras de linha onde há caracteres dentro da palavra que sugerem oportunidades de quebra de linha, como hífens (-), travessões curtos (–), travessões longos (—) ou hífens suaves (­). Se a propriedade hyphens for definida como none, as palavras não serão quebradas nas quebras de linha, mesmo se houver caracteres dentro da palavra que sugiram oportunidades de quebra de linha. Se a propriedade hyphens for definida como auto, o navegador pode quebrar automaticamente as palavras em pontos de hifenização apropriados, seguindo suas próprias regras.
A propriedade hyphens é herdada, o que significa que se for definida em um elemento pai, será aplicada a todos os elementos filhos, a menos que seja substituída por uma regra mais específica.
O Valor none
Quando a propriedade hyphens é definida como none, as palavras não são quebradas nas quebras de linha, mesmo se houver caracteres dentro da palavra que sugiram oportunidades de quebra de linha. Isso significa que se uma palavra for muito longa para caber na linha atual, ela transbordará ou será movida para a próxima linha em vez de ser hifenizada.
Exemplo: Usando o valor none
p {
hyphens: none;
}Neste trecho de código, você configura os elementos <p> para não permitir nenhuma hifenização, mesmo se houver caracteres dentro deles sugerindo o contrário.
O Valor 'manual'
Quando você usa este valor para 'hyphens', as palavras serão quebradas apenas em locais onde há caracteres sugerindo possíveis quebras, como hífens regulares ou suaves (configuração padrão).
Exemplo: Usando o valor manual
p {
hyphans: manual;
}Este código configura os elementos <p> para permitir apenas quebras manuais com base na colocação de caracteres especiais dentro deles.
O Valor 'auto'
Quando você usa este valor para 'hyphens', os navegadores podem encontrar automaticamente locais apropriados dentro de cada instância individual.
Controlando a Hifenização
Além da propriedade hyphens, o CSS oferece outras propriedades que permitem controlar como a hifenização se comporta em suas páginas web.
A propriedade hyphenate-character permite especificar o caractere usado ao hifenizar palavras. Por padrão, o caractere hífen (-) é usado, mas você pode alterá-lo para qualquer outro caractere, se desejar.
Exemplo: Caractere de Hifenização
p {
hyphens: auto;
hyphenate-character: '=';
}A propriedade hyphenate-limit-chars permite especificar o número mínimo de caracteres que devem estar presentes antes e depois de um ponto de hifenização. Ela aceita de um a três valores inteiros, representando o número mínimo de caracteres antes do ponto de hifenização, depois do ponto de hifenização e o comprimento mínimo da palavra.
Exemplo: Limite de Caracteres para Hifenização
p {
hyphens: auto;
hyphenate-limit-chars: 5 3 8;
}A propriedade hyphenate-limit-lines especifica quantas linhas consecutivas podem ser hifenizadas. Ela aceita um valor inteiro.
Exemplo: Limite de Linhas para Hifenização
p {
hyphens: auto;
hypernate-limit-lines: 2;
}A propriedade hyphanate-limit-zone define quanto espaço não preenchido (chamado de "zona de hifenização") pode ser deixado no final de uma linha antes que a hifenização seja acionada. Ela aceita um valor de comprimento.
Exemplo: Zona Limite para Hifenização
p {
hyphens: auto;
hyphenate-limit-zone: 8em;
}Este código define a zona máxima de hifenização no final da linha como 8em para elementos <p>.