30.04.2025

Implementando um Efeito de Desvanecimento de Texto em CSS com Overflow

Resumo Rápido

Para criar um efeito de desvanecimento do texto ao transbordar um contêiner, faça as seguintes alterações no CSS: defina a propriedade overflow: hidden para o contêiner e utilize o pseudo-elemento :after com um gradiente que transita de uma cor transparente para a cor de fundo do contêiner. Aqui está um código de exemplo:

.fade-text {
  position: relative;
  overflow: hidden;
  max-height: 100px;
}

.fade-text:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #FFF);
}

O código HTML correspondente é assim:

<div class="fade-text">Texto que transborda o contêiner desvanece suavemente de baixo para cima.</div>

Os principais parâmetros para ajustar o efeito de desvanecimento são a propriedade height do pseudo-elemento :after e o canal alfa rgba no gradiente.

Explicação Detalhada

O efeito de desvanecimento do texto ao ultrapassar os limites do contêiner é alcançado utilizando gradientes CSS, sem a necessidade de JavaScript. Vamos explorar esse mecanismo mais a fundo.

Como o Gradiente Funciona

Utilizando linear-gradient, é possível criar uma transição suave de total transparência para a cor que corresponde ao fundo do contêiner.

Compatibilidade entre Navegadores

Para garantir suporte em vários navegadores, utilize prefixos apropriados. Por exemplo, para o motor WebKit, aplique a seguinte notação:

.fade-text:after {
  background: -webkit-linear-gradient(bottom, rgba(255,255,255,0) 60%, #FFF);
  background: linear-gradient(to bottom, rgba(255,255,255,0) 60%, #FFF);
}

Assim, o efeito de desvanecimento do texto será exibido corretamente na maioria dos navegadores.

Ajustando a Área de Desvanecimento

Usando as propriedades max-height ou height, você pode definir a área onde o texto permanece visível antes de começar a desvanecer. Para regular o efeito de desvanecimento em si, ajuste a altura do pseudo-elemento :after:

.fade-text {
  max-height: 200px;
}

.fade-text:after {
  height: 60px;
}

Posicionando o Pseudo-Elemento :after

O pseudo-elemento :after é posicionado absolutamente dentro do contêiner que tem posicionamento relativo, criando a ilusão de texto em desvanecimento.

Exemplos

Para demonstrar e testar exemplos em tempo real, você pode usar plataformas online como jsFiddle ou CodePen.

Visualização

Imagine o texto como convidados chegando a uma festa no quintal através de portões estreitos. Se eles não couberem, começam a desvanecer gradativamente na névoa:

Antes: 🚶‍♀️🚶🚶‍♂️||____||🌼🎉
Depois: 🚶‍♀️🚶💨||____||🌼🎉

O CSS oferece uma maneira elegante de gerenciar o transbordamento de texto, mantendo a página organizada e fácil de ser percebida pelos usuários.

Recursos Úteis

1. Truncando Texto com Elipses usando CSS | CSS-Tricks - como usar CSS para truncamento dinâmico de texto.
2. Usando Gradientes CSS | MDN - criando um efeito de desvanecimento de texto com gradientes CSS.
3. ::after - MDN - descrição e aplicação do pseudo-elemento ::after.
4. Propriedade text-overflow em CSS - visão geral da propriedade text-overflow.
5. text-overflow - MDN – explicação detalhada da propriedade text-overflow.
6. position - MDN – guia sobre como usar a propriedade de posição para pseudo-elementos e outros elementos.

Video

Navigation