A Propriedade CSS "text-overflow"

Artigo que apresenta a propriedade CSS 3 text-overflow e sua utilização prática.

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

5 comentários

Unknown disse...

Ou via PHP simples e funcional sem enrolação:

function resumo($string,$chars) {
if (strlen($string) > $chars) {
while (substr($string,$chars,1) <> ' ' && ($chars < strlen($string))){
$chars++;
};
};
return substr($string,0,$chars)."...";
};




$textos = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";


echo resumo($texto, 100);

Rubens Takiguti Ribeiro (autor do blog) disse...

Olá, Unknown
Sim, com PHP também é possível. Porém, há diferenças. Com PHP, você quebra a string e, com isso, nem todo conteúdo é colocado do HTML. Considerando um layout flexível, em que um elemento pode ter uma largura em determinada tela, mas outra largura em outra tela (num dispositivo móvel, por exemplo), o text-overflow é mais elegante, já que ele mostra exatamente a quantidade de texto que cabe no espaço que você reservou a ele. Além disso, os bots continuam lendo todo o conteúdo, embora seja mostrada apenas parte dele.

Considerando que HTML é conteúdo e o fato de você querer mostrar apenas parte dele é estilo, entendo que faça mais sentido usar o text-overflow. A não ser que você considere "parte do texto" como sendo conteúdo, ou seja, um resumo com tamanho bem definido.