Em muitos idiomas escritos, é possível quebrar linhas entre sílabas e entre palavras. Isso geralmente é feito para que mais caracteres possam ser colocados em uma linha de texto com o objetivo de ter menos linhas em uma área de texto e, assim, economizar espaço. Nesses idiomas, o intervalo é indicado visualmente com um hífen ("-").
O CSS Text Module Level 3 define uma
propriedade de hífens para controlar quando os hífens são mostrados aos usuários e como eles se comportam
quando mostrados. A partir da versão 55, o Chrome implementa a propriedade hyphens.
De acordo com a especificação, a propriedade hífens tem três valores: none, manual
e auto. Para ilustrar isso, precisamos usar um hífen suave (­), como no
exemplo abaixo.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
Um hífen fraco é aquele que só aparece quando ocorre na margem
final. A renderização desse hífen no Chrome 55 ou mais recente depende do valor da
propriedade hypens do CSS.
-webkit-hyphens: manual;
hyphens: manual;
A combinação desses elementos resulta em algo como:
O hífen não está visível. Em todos os casos, quando uma palavra que contém o hífen-minuscula se encaixa em uma única linha, o hífen fica invisível. Agora, vamos conferir como os três valores de hífen se comportam.
Não usar
No primeiro exemplo, a propriedade hifens é definida como none. Isso impede que o
hífen suave seja mostrado. Para confirmar isso, ajuste o
tamanho da janela para que a palavra "elit" não caiba na linha visível de texto.
Manual de uso
No segundo exemplo, a propriedade de hifens é definida como manual, o que significa que o hífen
só vai aparecer quando a margem quebrar a palavra "elit". Novamente, você pode
confirmar isso ajustando o tamanho da janela.
Usar o modo automático
No terceiro exemplo, a propriedade hífens é definida como auto. Nesse caso, não é necessário usar
hífens suaves, já que o agente do usuário vai determinar os locais dos hifens
automaticamente. Se você redimensionar a janela, vai notar que o navegador separa
esse exemplo no mesmo lugar que no segundo, embora não haja um hífen
presente. Se você continuar reduzindo a janela, verá que o navegador
pode quebrar linhas entre duas sílabas no texto.