A hyphenspropriedade controla a hifenização de texto em elementos de nível de bloco. Você pode evitar que a hifenização aconteça, permitir ou permitir apenas quando certos caracteres estiverem presentes.
Observe que hyphensé sensível ao idioma. Sua capacidade de encontrar oportunidades de descanso depende do idioma, definido no langatributo de um elemento pai. Nem todos os idiomas são suportados ainda, e o suporte depende do navegador específico.
Sintaxe
p ( hyphens: none | manual | auto )hífens: nenhum
As palavras nunca são hifenizadas nas quebras de linha, mesmo se os caracteres dentro da palavra sugerirem onde a hifenização pode ou deve ir.
hífens: manual
As palavras são quebradas apenas nas quebras de linha onde há caracteres dentro da palavra que sugerem oportunidades de quebra de linha. Existem dois caracteres que sugerem oportunidade de quebra de linha:
U+2010(HÍFEN): o caractere hífen “rígido” indica uma oportunidade de quebra de linha visível. Mesmo se a linha não for realmente quebrada nesse ponto, o hífen ainda será renderizado. Literalmente um “-“.U+00AD(SHY): um hífen invisível, “suave”. Este caractere não é reproduzido de forma visível; em vez disso, sugere um local onde o navegador pode escolher quebrar a palavra, se necessário. Em HTML, você pode usar-para inserir um hífen suave.
hífens: auto
As palavras podem ser quebradas em pontos de hifenização apropriados conforme determinado pelos caracteres de hifenização (veja acima) dentro da palavra ou conforme determinado automaticamente por um recurso de hifenização apropriado ao idioma (se suportado pelo navegador ou fornecido via @hyphenation-resource).
Os caracteres de hifenização condicional dentro de uma palavra, se presentes, têm prioridade sobre os recursos automáticos ao determinar os pontos de hifenização dentro da palavra.
hífens: tudo
Obsoleto, não use . Isso estava na especificação apenas temporariamente para teste.
Demo
A demonstração abaixo tem vários parágrafos e tudo está definido hyphens: auto;para demonstrar o conceito de hifenização. O langatributo é definido como enno elemento pai.
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| 88 | 6 * | 10 * | 12 * | 5,1 * |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 4,2-4,3 * |
Requer Safari 5+ -webkit-, Firefox 6+ requer -moz-, IE 10+ requer -ms-, iOS 4.2+ requer -webkit-.
Na verdade -webkit-hyphens: none, os navegadores Chrome <55 e Android suportam , que é o valor padrão, mas nenhum dos outros valores.
No Firefox e no Internet Explorer, a hifenização automática funciona apenas para alguns idiomas (definidos com o langatributo). Veja esta nota para uma lista abrangente de idiomas suportados.
Se você estiver escrevendo um documento baseado na web que realmente precisa de hifenização, você pode usar Hyphenator.js, que é uma biblioteca baseada em um vasto dicionário que injeta automaticamente hifens suaves e espaços de largura zero em seu conteúdo.
Sem JavaScript, você tem que confiar em ambos hyphense word-wrap:
.hyphenate ( word-wrap: break-word; overflow-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; )