A Propriedade CSS "text-overflow"

Introdução

Quem trabalha com design Web e CSS, deve conhecer a propriedade overflow, que define como será o comportamento de um bloco em relação à sua rolagem caso o seu tamanho seja inferior ao do seu conteúdo. Mas hoje me deparei com a propriedade text-overflow, que eu nunca havia visto. Ela é muito simples, mas só está prevista para o CSS 3.

O Firefox só suportará esta propriedade na versão 7, enquanto outros navegadores já a suportam há algumas versões. O interessante é que o Internet Explorer suporta a propriedade desde a versão 6.0 (aquela famosa versão). Creio que seja uma invenção da Microsoft na época e que acabará se tornando um padrão.

---

O que faz?

O controle sobre o "sobrefluxo" de texto (text-overflow) ainda não está definido. Porém, existe uma prévia da sua especificação no link "Previsão de Especificação da Propriedade text-overflow". Basicamente, o controle serve para colocar um sinal de reticências (ou "três pontos", para os menos íntimos) quando um texto for maior que o espaço reservado a ele. Isso normalmente é usado em pontos do layout em que não é necessário ver todo o texto. Opcionalmente, pode-ser usar algumas estratégias de CSS (como o pseudo-seletor :hover) para mostrar o texto completo ao se passar o mouse por ele. Com isso, espera-se um layout mais limpo e sob-controle, especialmente em pontos do layout com tamanho fixo, mas com conteúdo variável.

---

Como funciona?

O controle de sobrefluxo de texto funcionará com duas propriedades CSS: text-overflow-mode e text-overflow-ellipsis. Como atalho, deverá existir ainda a propriedade text-overflow, que receberá um valor para text-overflow-mode seguido de um valor para text-overflow-ellipsis.

A propriedade text-overflow-mode servirá para especificar o comportamento do sobrefluxo de texto e, a princípio, poderá ter um dos seguintes valores:

• clip - Quebra o texto quando necessário (não coloca a reticências).
• ellipsis - Inclui a reticências caso o texto seja maior que o espaço reservado (cuidado com a tradução de ellipsis do inglês, que pode ser "elipse" ou "reticências").
• ellipsis-word - Também inclui a reticências caso o texto seja maior que o espaço reservado, mas só coloca o símbolo após a última palavra completa (para garantir que a reticências não quebre uma palavra ao meio).

(Obs.: talvez poderia existir algum valor para permitir que uma palavra seja quebrada apenas em um ponto de hifenização).

Já a propriedade text-overflow-ellipse servirá para especificar qual símbolo deverá ser usado para indicar reticências. Por padrão, é usado o símbolo de reticências (três pontos), mas será possível usar outro símbolo ou o caminho para alguma imagem.

Por fim, a propriedade text-overflow será uma forma abreviada para especificar o modo e o símbolo de uma vez só.

---

Exemplo

Veja o código abaixo:

div#teste {
  width :100px;
  text-overflow-mode: ellipsis;
}

HTML:

<div id="teste">
Teste teste teste teste teste teste teste teste teste.
</div>

Isso servirá para especificar que o DIV terá largura de 100 pixels e o texto do DIV será mostrado até onde puder. A porção do texto que exceder o tamanho de 100 pixels será substituído por um símbolo de reticências.

---

Observações e Conclusão

O comportamento obtido com a propriedade text-overflow antigamente precisava ser implementado por programadores e o efeito ainda apresentava algumas limitações.

Embora a especificação não esteja pronta, alguns navegadores já suportam alguns valores para text-overflow:

• Internet Explorer, a partir da versão 6.0 tem text-overflow
• Firefox (Gecko) a partir da versão 7.0 (Gecko 7.0) tem text-overflow
• Opera (Presto) a partir da versão 9.0 (Presto 2.0) tinha -o-text-overflow
• Opera (Presto) a partir da versão 11.0 (2.7) tem text-overflow
• Safari, Chrome, WebKit a partir das versões 1.3, 1.0 e 312.3 tem text-overflow