Se você já precisou limitar a quantidade de linhas de um elemento sem recorrer ao JavaScript, a propriedade CSS line-clamp pode ajudar. É uma forma prática de controlar o conteúdo criado por usuários, manter cartões alinhados ou evitar que o texto quebre o layout.

Em termos simples, line-clamp limita o número de linhas em um contêiner de bloco a uma quantidade especificada (desde que não seja multi-coluna). Quando ocorre o clamp, o texto excedente é cortado e substituído por reticências (…) para indicar que há mais a ser lido. Não há uma alternância embutida para expandir o texto, mas é uma abordagem limpa e leve para controle de layout.

Neste artigo, você aprenderá a usar line-clamp de forma eficaz em diversos navegadores, quais peculiaridades observar e como isso impacta a UX e acessibilidade.

Por que usar line-clamp?

A propriedade pode ser útil em vários cenários: aparar texto gerado por usuário, garantir layouts de cartões consistentes ou até mesmo restringir conteúdo atrás de um paywall.

Por exemplo, para restringir conteúdo criado por usuários:

Veja o Pen line-clamp user content por Daniel Schwarz (@mrdanielschwarz) no CodePen.

Ou para alinhar layouts de cartões de forma mais ordenada:

Veja o Pen line-clamp cards por Daniel Schwarz (@mrdanielschwarz) no CodePen.

Ou até mesmo para truncar uma pré-visualização de artigo para um paywall:

Veja o Pen line-clamp paywall por Daniel Schwarz (@mrdanielschwarz) no CodePen.

Apesar de sua utilidade, line-clamp possui várias peculiaridades que vão desde inconsistências entre navegadores até falhas sutis de UX, e requer um conjunto específico de propriedades complementares para funcionar corretamente.

Como usar line-clamp (solução entre navegadores)

Em um mundo ideal, você poderia simplesmente escrever line-clamp: 2; para limitar o texto a duas linhas. Em navegadores Chromium como Chrome, Edge e Opera, isso funciona bem, embora a documentação no MDN ou Can I use… ainda sugira o contrário. Na prática, você precisará de algumas propriedades extras para garantir resultados consistentes em todos os navegadores.

Aqui está uma implementação funcional entre navegadores:

p {
  /* Safari & Firefox */
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;

  /* Chromium */
  line-clamp: 2;
}

Essa configuração usa tanto as versões com prefixo de fornecedor quanto as não prefixadas lado a lado. O Firefox suporta a sintaxe com prefixo WebKit, portanto, isso funciona em todos os principais navegadores.

Se você preferir um código condicional mais limpo, pode usar a regra @supports:

p {
  @supports (line-clamp: 2) {
    line-clamp: 2;
  }

  @supports not (line-clamp: 2) {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

Dito isso, a primeira abordagem é mais segura, pois o suporte a navegadores para a propriedade line-clamp sem prefixo ainda está evoluindo.

Personalizando ou substituindo as reticências

Infelizmente, não há uma maneira embutida de personalizar ou remover as reticências (…) geradas por line-clamp. A propriedade text-overflow não se aplica, pois só afeta o overflow inline. Mesmo usar text-overflow: clip não funciona aqui.

A propriedade proposta block-ellipsis pode eventualmente permitir que os desenvolvedores estilizem ou substituam as reticências, mas por enquanto, não é suportada. Você também não pode adicionar um link “Leia mais” dentro do mesmo contêiner — ele apareceria após o conteúdo truncado, que não é visível.

Não há uma solução elegante ainda, embora alguns desenvolvedores experimentem sobreposições ou máscaras de desvanecimento. Por enquanto, é melhor abraçar as reticências embutidas ou projetar em torno delas.

As falhas de UX de line-clamp

Embora line-clamp pareça ótimo visualmente, ele levanta algumas questões sutis de UX e acessibilidade.

• Busca na página: A pesquisa do navegador ainda detecta o texto truncado, mesmo que esteja oculto, confundindo os usuários que não conseguem rolar até ele.
• Leitores de tela: O conteúdo truncado é acessível para tecnologias assistivas, o que pode causar expectativas confusas se você estiver ocultando intencionalmente parte do conteúdo (como um paywall).
• SEO: Os motores de busca podem indexar o texto truncado, já que ele permanece no código fonte, potencialmente mostrando conteúdo oculto em snippets.

Em resumo, line-clamp corta o conteúdo visualmente, mas não semanticamente. Isso pode ser aceitável para casos de uso estético, mas problemático para trechos ou conteúdo restrito.

Como line-clamp pode melhorar a UX

Apesar dessas limitações, line-clamp pode aumentar a clareza visual e a legibilidade quando usado intencionalmente.

Em layouts de cartões, ele mantém descrições uniformes, permitindo que os usuários analisem mais conteúdo de uma vez:

Veja o Pen line-clamp cards por Daniel Schwarz (@mrdanielschwarz) no CodePen.

Quando aplicado ao conteúdo gerado por usuários, ele evita que layouts sejam quebrados por bios ou mensagens muito longas:

Veja o Pen line-clamp bios por Daniel Schwarz (@mrdanielschwarz) no CodePen.

E quando usado de forma criativa, pode até mesmo impor pré-visualizações de paywall em múltiplos elementos aninhados, aplicando line-clamp ao elemento pai

p {
  max-height: 3lh; /* equivalente a aproximadamente três linhas de texto */
  overflow: hidden;
}