hifens

hyphens: none;
hyphens: manual;
hyphens: auto;

/* Valores globais */
hyphens: inherit;
hyphens: initial;
hyphens: unset;

Regras de hifenização são específicas para cada idioma. Em HTML, o idioma é determinado pelo atributo lang, e os navegadores irão utilizar hífen apenas caso este atributo esteja presente e se houver um dicionário de hifenização disponível. Em XML, deve ser usado o atributo xml:lang.

Value not found in DB!

A propriedade hyphens é especificada como uma única palavra-chave escolhida da lista abaixo.

none

Palavras não são separadas em quebras de linha, mesmo se seus caracteres sugiram pontos de quebra de linha. Linhas são quebradas apenas em espaços em branco.

manual

Palavras são separadas apenas onde caracteres dentro de uma palavras sugiram oportunidades de quebra de linha. Veja abaixo Oportunidades sugeridas de quebra de linha para mais detalhes.

auto

O navegador é livre para quebrar palavras automaticamente nos pontos apropriados de hifenização, seguindo quaisquer regras que ele escolher. Entretanto, oportunidades sugeridas de quebras de linha (veja Oportunidades sugeridas de quebra de linha abaixo) irão sobrepor a seleção automática de pontos de quebra quando presentes.

Existem dois caracteres Unicode que podem ser utilizados para especificar manualmente potenciais pontos de quebra de linha no texto:

U+2010 (HYPHEN)

O caractere hífen "duro" indica uma oportunidade de quebra de linha visível. Mesmo que não haja quebra de linha naquele ponto, o hífen ainda será renderizado.

U+00AD (SHY)

Um hífen invisivel, "suave". Este caractere não é renderizado visivelmente; ao invés, ele marca um local onde o browser deve quebrar a palavra se um hífen for necessário. Em HTML você pode usar ­ para inserir um hífen suave.

Syntax not found in DB!

Este exemplo usa três classes, uma para cada configuração possível da propriedade hyphens.

<ul>
  <li><code>none</code>: sem hífen; transbordar se necessário
    <p lang="en" class="none">An extreme&shy;ly long English word</p>
  </li>
  <li><code>manual</code>: hífen apenas em &amp;hyphen; ou &amp;shy; (se necessário)
    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
  </li>
  <li><code>auto</code>: hífen onde o algorítmo decidir (se necessário)
    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
  </li>
</ul>

p {
  width: 55px;
  border: 1px solid black;
 }
p.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
p.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
p.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

[1] Sem hifenização automática, apenas -webkit-hyphens: none é suportado.

[2] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Gecko. Veja a nota abaixo para ver a lista completa destas linguagens.

[3] Hifenização automática funciona apenas para idiomas cujos dicionários de hifenização sejam integrados com Internet Explorer. Veja a nota abaixo para ver a lista completa destas linguagens.

[4] Usa um dicionário en-US.

[5] en-GB e en-US usam dicionários diferentes.

[6] Usa um dicionário Português.

• content