Em muitos idiomas escritos, é possível quebrar linhas entre sílabas e entre palavras. Isso geralmente é feito para que mais caracteres sejam 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, a quebra é indicada visualmente com um hífen ('-').
O Módulo de texto CSS de nível 3 define uma
propriedade de hífens para controlar quando os hifens são mostrados aos usuários e como eles se comportam
quando são mostrados. A partir da versão 55, o Chrome implementa a propriedade hífens.
De acordo com a especificação, a propriedade de hifens tem três valores: none, manual
e auto. Para ilustrar isso, precisamos usar um hífen leve (­), como no
exemplo abaixo.
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
Um hífen suave é aquele que só será exibido quando ocorrer na margem
final. A forma como esse hífen é renderizado no Chrome 55 ou posterior depende do valor da propriedade hypens do CSS.
-webkit-hyphens: manual;
hyphens: manual;
Combinar os dois gera um resultado como este:
Observe que o hífen suave não fica visível. Em todos os casos, quando uma palavra contendo o hífen suave se encaixa em uma única linha, o hífen fica invisível. Agora, vamos ver como os três valores de hífen se comportam.
Nenhuma
No primeiro exemplo, a propriedade de hifens é definida como none. Isso evita que o hífen flexível seja exibido. Você pode confirmar isso ajustando o
tamanho da janela para que a palavra "elit" não caiba na linha de texto visível.
Usando o manual
No segundo exemplo, a propriedade de hifens é definida como manual, o que significa que o hífen
flexível só vai aparecer quando a margem quebra a palavra "elit". Novamente, você pode
confirmar isso ajustando o tamanho da janela.
Usar o modo automático
No terceiro exemplo, a propriedade de hifens é definida como auto. Nesse caso, nenhum hífen é necessário, porque o user agent determinará os locais do hífen automaticamente. Se você redimensionar a janela, vai notar que o navegador coloca
esse exemplo em hífen no mesmo lugar do segundo, embora não haja
um hífen suave. Se você continuar reduzindo a janela, o navegador poderá
quebrar linhas entre duas sílabas do texto.