21.11.2024

Efeito de Ellipsis em CSS: Aplicação na Segunda Linha

Resposta Rápida

Para aplicar um ellipsis após a segunda linha de texto usando CSS, utilize as propriedades display: -webkit-box;, -webkit-line-clamp: 2; e -webkit-box-orient: vertical;, que são específicas do WebKit. Assim, seus blocos de texto serão limitados a duas linhas, e qualquer texto restante será ocultado com um ellipsis. É importante lembrar que essa solução é característica do WebKit e pode não ser suportada por alguns navegadores. Para garantir que tudo seja exibido corretamente, defina a max-height como o dobro do valor de line-height.

.duas-linhas-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Número de linhas exibidas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 3.2em; /* Deve corresponder à altura de duas linhas */
}

<div class="duas-linhas-ellipsis">
  Texto longo mergulha no abismo e precisa ser domado…
</div>

Nota: O valor de max-height na classe .duas-linhas-ellipsis deve ser ajustado de acordo com a sua line-height definida.

Criando o Efeito de Ellipsis em Diferentes Navegadores: Ferramentas e Recursos

O método que utiliza o WebKit, embora simples e rápido, requer uma abordagem mais refinada para compatibilidade entre navegadores, o que pode incluir soluções e truques adicionais. Em situações onde o WebKit não consegue lidar com a tarefa, bibliotecas JavaScript ou métodos CSS entram em cena.

Bibliotecas JavaScript: dotdotdot a Seu Serviço

Um dos métodos universais e compatíveis com vários navegadores é usar uma biblioteca JavaScript como o dotdotdot. Sua integração é simples, fornecendo uma solução universal para lidar com conteúdo dinâmico, redimensionamento e elementos aninhados.

$('.texto-multilinha').dotdotdot({
  height: 100, // Altura máxima do bloco de texto
});

Método CSS Puro para Truncar Texto com Pseudo-elementos

Uma abordagem criativa baseada em CSS utiliza o pseudo-elemento ::after, posicionado absolutamente, para criar o efeito de ellipsis. Não é tão flexível quanto os métodos baseados em WebKit ou JavaScript, mas funciona muito bem para conteúdo estático.

.ellipsis-fallback::after {
  content: '...'; /* Ellipsis */
  position: absolute;
  bottom: 0;
  right: 0; /* Fim do texto, desculpe */
}

A Futuro Propriedade max-lines

Vale a pena mencionar a possível implementação da propriedade max-lines pelo W3C, que pode se tornar um padrão no futuro. Por enquanto, vamos nos ater ao princípio da melhoria progressiva: forneça funcionalidade básica para todos os usuários, aprimorando-a para aqueles que utilizam navegadores mais modernos.

Visualização

Imagine um livro em uma estante, onde apenas as duas primeiras linhas estão abertas para visualização:

A lombada do livro (📚): [Linha 1, Linha 2, ..., o mistério das páginas seguintes]

O ellipsis (...) chama você, prometendo a continuação da história:

Fragmento da história: [Linha 1, Linha 2...]

Graças ao CSS, este fragmento se torna ainda mais intrigante, uma vez que a história é confinada à narração das duas primeiras linhas:

.linha-livro {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* "História de duas linhas" em ação */
  -webkit-box-orient: vertical;
}

E você não pode esperar para descobrir o que acontece a seguir…:

📚: ["Era uma vez", "em uma terra distante..."]

Domínio na Truncagem de Texto: Explorando Nuances

Trabalhar com o overflow de texto envolve diversos detalhes: considerar a localização, a responsividade e os tamanhos dos containers. Vamos explorá-los.

Localização e Comprimento das Palavras

Em sites multilíngues, os ellipses podem parecer ambíguos devido ao comprimento variável das palavras em diferentes idiomas. Tenha isso em mente para manter a estabilidade do design nas várias localizações.

Desenvolvimento em um Ambiente Responsivo

Em um mundo de design responsivo, o texto com o efeito de ellipsis se comportará de forma diferente dependendo dos tamanhos das telas. Teste sua solução em diversos dispositivos para evitar surpresas indesejadas.

Links Ancorados e o Efeito de Ellipsis

Ao usar truncamento de texto para links ancorados, é crucial garantir que o efeito de truncamento seja claramente visível. O CSS é basicamente o mesmo, mas a elaboração adequada do bloco de texto garantirá uma percepção confiável.

.link-truncado {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Recursos Úteis

1. line-clamp | CSS-Tricks - Um guia abrangente da CSS-Tricks sobre como usar a propriedade line-clamp.
2. text-overflow - CSS: Cascading Style Sheets | MDN - Guia da MDN Web Docs sobre a propriedade text-overflow.
3. Limitando o comprimento do texto a n linhas usando CSS - Stack Overflow - Soluções práticas da comunidade Stack Overflow sobre como limitar texto a n linhas.
4. Can I use... Tabelas de suporte para HTML5, CSS3, etc - Veja como a propriedade line-clamp é suportada em diferentes navegadores.
5. CSS Overflow Module Level 3 - Interessado em saber mais sobre o que o CSS Working Group está planejando para a propriedade overflow?
6. text-overflow | Codrops - Dicas e exemplos da Codrops CSS Reference sobre text-overflow.

Video

Navigation