Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601

Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/crian734/public_html/blog.kolaborativa/wp-includes/plugin.php on line 601
Efeitos de Texto – Parte 4: text-overflow - Kolaborativa

Efeitos de Texto – Parte 4: text-overflow

text-overflow


Alguns conteúdos em um elemento podem sair fora da caixa de renderização do elemento por uma série de razões (margens negativas, o posicionamento absoluto, o índice superior a largura / altura definida por um elemento, etc).

Nos casos em que isso ocorre, a propriedade text-overflow traz uma alternativa, o texto extra se mostra sem problemas.

Os valores possíveis da propriedade são:

  • text-overflow: ellipsis;

O conteúdo do texto que transbordará, é mostrado com a seqüência de “…” na região visível.

  • text-overflow: clip;

O conteúdo visível para a área definida pela caixa de processamento.

OBS: Lembrando-se que para usar a propriedade no Mozilla Firefox utiliamos -moz-, e para o Safari e Google Chrome o -webkit-.

Para que funcione em todos os browsers é necessário que o elemento tenha largura fixa, tenha a propriedade white-space:nowrap e overflow:hidden.

Exemplo text-overflow: ellipsis

Esse é um exemplo de conteúdo transbordante


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores


Exemplo text-overflow: clip

Esse é um exemplo de conteúdo transbordante


Funciona no: navegadoresnavegadoresnavegadoresnavegadoresnavegadores

Author Description

dodilei

Dizem que falo comendo as palavras, mas o que gosto de comer é um bom paniqueijo! além de OpenSource, Linux, Python e Javascript! :D

There are 3 comments. Add yours

  1. 22nd fevereiro 2011 | Paulo says: Responder
    Aqui não esta funcionando os exemplos...
  2. 22nd fevereiro 2011 | Paulo says: Responder
    style="width: 200px; height: 20px; border: 1px solid black; white-space: nowrap; overflow: hidden; -webkit-text-overflow: ellipsis; text-overflow: ellipsis; esta faltando para o mozilla... -moz-text-overflow:
  3. 22nd fevereiro 2011 | Dodilei says: Responder
    Paulo, o primeiro exemplo ainda nao funciona no Mozila, mas o segundo sim! acabei de testar... eu coloquei um indicativo de qual navegador possui suporte atravéz dos ícones... no primeiro exemplo coloquei o mozila em preto e branco, indicando que nao funciona...

Join the Conversation