06.02.2025

Reticência no Fim de um Bloco CSS Multi-Linhas

Resposta Rápida

Para adicionar uma reticência em um bloco com várias linhas em CSS, utilize a propriedade -webkit-line-clamp. Essa propriedade corta o texto após um número especificado de linhas e adiciona uma reticência.

Exemplo de código:

.ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; // Define o número de linhas antes da reticência
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

<div class="ellipsis">
  Um texto que é muito longo será cortado após duas linhas e terminará com uma reticência...
</div>

Alterando o valor de -webkit-line-clamp, você pode ajustar o número de linhas após as quais o texto será cortado.

Recomendações de Compatibilidade

-webkit-line-clamp é projetado para uso em navegadores baseados em WebKit, como Chrome e Safari. Para compatibilidade ideal entre navegadores diferentes, recomenda-se também usar um gradiente para um desvanecimento mais suave do texto ou JavaScript para implementações mais complexas.

jQuery para o Socorro

Se o CSS não atender às suas necessidades, jQuery pode ajudar. Plugins como dotdotdot, jquery.autoellipsis e jquery-truncate tratam de forma eficaz o problema de overflow de texto em várias linhas.

Exemplo de uso do plugin 'dotdotdot':

$(".multiline").dotdotdot({
  // Configuração do plugin
});

Lembre-se de que o uso de plugins pode afetar o desempenho. Portanto, é essencial escolhê-los com sabedoria.

Efeito de Desvanecimento Suave com CSS

A reticência não é a única opção. Você pode criar um efeito de desvanecimento estiloso usando um gradiente linear que oculta discretamente o texto que transborda.

Exemplo de criação do efeito:

.fade-out {
  position: relative;
  max-height: 4.5em;
  overflow: hidden;
  line-height: 1.5em;
}

.fade-out:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 1.5em;
  background: linear-gradient(to right, transparent, white 50%);
}

Combinar max-height e overflow: hidden ajuda a criar um efeito de truncamento visualmente atraente.

Considerando o Equilíbrio do Texto no Design

O truncamento de texto em várias linhas requer um design cuidadosamente considerado, incluindo cores de fundo, espaçamento de linhas e posicionamento do elemento, bem como o posicionamento adequado da reticência, preferencialmente ao final da última linha visível.

Técnicas Criativas de CSS

Para navegadores que não suportam WebKit, você pode usar pseudo-elementos e posicionamento absoluto para simular a reticência em várias linhas. Crie condições para exibi-las apenas quando o texto transbordar o bloco.

Visualização

Vamos dar uma olhada em um exemplo de como o texto é truncado com uma reticência em um bloco de várias linhas:

Bloco de texto: [📝📝📝📝]

Aplicando o seguinte CSS:

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

O resultado será:

Seu bloco:
[📝📝📝...]

Agora, o texto se encaixa em 3 linhas e termina com uma reticência.

Adaptando para Diferentes Plataformas

A reticência em várias linhas pode não ser adequada em todos os casos. É necessário considerar o suporte para versões mais antigas dos navegadores, reservar espaço para a reticência e adaptar tamanhos para vários dispositivos. Alternativamente, o JavaScript pode ser utilizado.

Tenha cuidado para criar uma interface amigável ao usuário ao lidar com overflow de texto.

Recursos Úteis

1. line-clamp | CSS-Tricks – um guia detalhado sobre reticências em várias linhas em CSS usando line-clamp.
2. text-overflow - CSS: Cascading Style Sheets | MDN – guia abrangente da MDN sobre como lidar com overflow de texto.
3. Can I use... Tabelas de suporte para HTML5, CSS3, etc – verifique a compatibilidade dos navegadores com a propriedade CSS text-overflow.
4. CSS Overflow Module Level 3 - a especificação oficial do W3C sobre gerenciamento de overflow.
5. html - Aplicando uma reticência a texto multilinha - Stack Overflow – abordagens e soluções da comunidade para truncamento de texto em várias linhas.
6. Como Desenhar um Nariz de Cartum | Envato Tuts+ – uma lição de desenho única.
7. Tamanho Importa: Equilibrando O Comprimento da Linha e o Tamanho da Fonte no Design Web Responsivo — Smashing Magazine – dicas úteis sobre tipografia responsiva que complementam o trabalho de truncamento de texto.

Video

Navigation