Como Truncar Texto em CSS

Para truncar texto em CSS, use text-overflow: ellipsis para cortar uma única linha e line-clamp para cortar em um número fixo de linhas — essa distinção define tudo o mais.

Se você já assistiu o título de um card ultrapassar seu container enquanto text-overflow: ellipsis não fazia absolutamente nada, já conhece essa frustração. A falha quase sempre se resume a uma de duas coisas: a técnica errada para o número de linhas desejado, ou um elemento pai com flexbox que silenciosamente se recusa a encolher. O truncamento de linha única precisa de três declarações trabalhando em conjunto; o truncamento multilinha precisa do trio -webkit-box. Os pontos que realmente quebram em produção são mais específicos: o ellipsis falha silenciosamente dentro do flexbox, o clamp multilinha falha se o texto não puder quebrar linha, e o truncamento baseado em JavaScript destrói silenciosamente o conteúdo que os leitores de tela precisam. Este artigo percorre cada padrão funcional e a armadilha associada a ele.

Aqui está a regra de decisão em formato de tabela:

Como truncar uma única linha de texto?

Para truncar uma única linha de texto, três declarações devem funcionar em conjunto: white-space: nowrap impede a quebra de linha, overflow: hidden corta o que transborda, e text-overflow: ellipsis adiciona o …. Remova qualquer uma das três e o efeito quebra: text-overflow sozinho não faz nada em texto que quebra linha, e sem overflow: hidden não há uma caixa de recorte para o ellipsis se apoiar.

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

O elemento também precisa de uma largura restritiva. Se o container for largo o suficiente para caber toda a string em uma linha, nada transborda e nenhum ellipsis aparece: é a largura do elemento pai que força o truncamento. Aplique isso a cards, células de tabela, itens de navegação ou títulos que devem permanecer em uma única linha.

A propriedade text-overflow aceita clip (o corte abrupto padrão), ellipsis e uma <string> personalizada. Há também a palavra-chave fade e a função fade(), adicionadas ao padrão no CSS Overflow Level 4 e listadas na sintaxe formal do MDN, mas efetivamente nenhum navegador as implementa, portanto não dependa de nenhuma delas em produção.

Como truncar texto em múltiplas linhas?

Para truncamento multilinha, defina display: -webkit-box, -webkit-box-orient: vertical, -webkit-line-clamp: N e overflow: hidden. Apesar dos prefixos de fornecedor, essa combinação é suportada por todos os principais navegadores e é a abordagem segura para produção atualmente.

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Mantenha o overflow: hidden. Como o MDN observa, sem ele o texto não é realmente cortado, mas o ellipsis ainda aparece após a contagem de linhas, resultando em ellipsis e texto transbordando visíveis simultaneamente. Essas propriedades com prefixo também são codependentes: -webkit-line-clamp só funciona quando display é -webkit-box (ou -webkit-inline-box) e -webkit-box-orient é vertical. As propriedades com prefixo estão formalmente depreciadas, mas essa dependência tripla é em si um comportamento especificado que os navegadores continuarão suportando, portanto utilizá-las em produção não representa risco real.

Um modo de falha a observar: o clamp multilinha só funciona se o texto puder quebrar linha. Um white-space: nowrap herdado irá quebrá-lo silenciosamente, colapsando tudo em uma única linha. Mantenha white-space como normal ou pre-wrap.

Existe também uma propriedade line-clamp padronizada sem prefixo definida no CSS Overflow Module Level 4, que limita o conteúdo de um bloco a um número definido de linhas. Em 2026, porém, ela ainda está marcada como não Baseline, pois alguns navegadores amplamente utilizados ainda não a suportam. Trate-a como aprimoramento progressivo. Adicione-a junto com as declarações com prefixo, não como substituta:

.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3; /* padronizado, adicione junto — ainda não é substituto */
  overflow: hidden;
}

Por que o ellipsis falha dentro do flexbox (e do grid)

O ellipsis falha silenciosamente em um filho de flex porque o min-width: auto padrão de um item flex se recusa a encolher abaixo da largura do seu conteúdo, de modo que o elemento nunca fica estreito o suficiente para transbordar e text-overflow não tem nada para cortar. O filho ultrapassa seu container em vez de truncar. A correção é uma única declaração no filho:

.card { display: flex; }

.card__label {
  min-width: 0; /* sobrescreve o mínimo automático para o item poder encolher */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

O dimensionamento mínimo automático min-width: auto também se aplica a itens de grid, portanto o truncamento dentro de uma faixa CSS Grid falha pelo mesmo motivo. A correção é a mesma: defina min-width: 0 no filho (ou overflow: hidden, que também remove o mínimo automático). Este é o bug de truncamento mais comum no mundo real: o CSS parece correto isoladamente e só quebra quando o elemento é um filho de flex ou grid.

Equivalentes no Tailwind

O Tailwind inclui ambos os padrões como utilitários, sem necessidade de plugin. O utilitário truncate é composto e define overflow: hidden, text-overflow: ellipsis e white-space: nowrap: a receita completa de linha única em uma única classe. Para múltiplas linhas, line-clamp-<n> (por exemplo line-clamp-3, ou line-clamp-none para desativar) emite o trio -webkit-box. Os utilitários de line-clamp fazem parte do core do Tailwind desde a v3.3; a versão estável atual é a v4.3.3 (julho de 2026), portanto não há nada extra a instalar.

<p class="truncate">Linha única, cortada com ellipsis…</p>
<p class="line-clamp-3">Múltiplas linhas, limitadas a três…</p>

Dentro de um filho de flex ou grid, adicione min-w-0: o equivalente utilitário da correção min-width: 0.

Acessibilidade: truncamento CSS vs. truncamento JS

Como o truncamento CSS é puramente apresentacional, a string completa permanece no DOM e os leitores de tela ainda a leem integralmente, sem necessidade de aria-label. Esta é a diferença decisiva em relação ao truncamento com JavaScript: uma abordagem com text.substring(0, 50) reescreve o nó do DOM, de modo que o texto cortado desaparece para todos, incluindo tecnologias assistivas, a menos que você o preserve separadamente com um atributo title ou aria-label.

Mesmo com CSS, o truncamento ainda oculta informações visualmente. Replays de sessão em UIs de produção frequentemente revelam esse tipo de problema: um usuário passando o mouse ou tentando ler uma célula de tabela ou item de navegação cortado que esconde exatamente o detalhe que ele precisava. Combine o truncamento em conteúdo informativo com um atributo title ou uma opção de expansão:

<span class="truncate" title="Relatório de receita trimestral — Região EMEA, T3 2026">
  Relatório de receita trimestral — Região EMEA, T3 2026
</span>

Uma limitação importante: o ellipsis do -webkit-line-clamp não pode ser personalizado e text-overflow não se aplica a ele, pois text-overflow afeta apenas o overflow inline. Se você precisar de um indicador de truncamento personalizado em texto multilinha, isso é um sinal para adotar um padrão diferente em vez de forçar o clamp.

Use text-overflow: ellipsis quando precisar de uma linha e o trio line-clamp quando precisar de várias, lembre-se de min-width: 0 assim que o elemento estiver dentro de flex ou grid, e adicione um title sempre que o texto oculto carregar significado. Isso cobre os padrões que funcionam corretamente em produção e os três que silenciosamente não funcionam.

Perguntas Frequentes

Qual é a diferença entre text-overflow: ellipsis e line-clamp?

Use text-overflow: ellipsis para cortar uma única linha e line-clamp para cortar em um número fixo de linhas. O truncamento de linha única precisa de três declarações trabalhando em conjunto: white-space: nowrap, overflow: hidden e text-overflow: ellipsis. O clamp multilinha precisa do trio -webkit-box mais overflow: hidden e não responde a text-overflow, pois essa propriedade afeta apenas o overflow inline.

Por que meu truncamento com ellipsis não funciona dentro de um flexbox ou grid?

O min-width: auto padrão de um item flex ou grid se recusa a encolher abaixo da largura do seu conteúdo, de modo que o elemento nunca fica estreito o suficiente para transbordar e text-overflow não tem nada para cortar. Definir min-width: 0 nesse filho sobrescreve o mínimo automático e restaura o truncamento. Aplicar overflow: hidden ao filho também remove o mínimo automático. Este é o bug de truncamento mais comum no mundo real, pois o CSS parece correto isoladamente.

É seguro usar a propriedade line-clamp sem prefixo sozinha em 2026?

Não. A propriedade line-clamp padronizada sem prefixo está definida no CSS Overflow Module Level 4, mas em 2026 o MDN a marca como não Baseline porque não funciona em alguns dos navegadores mais amplamente utilizados. Adicione-a junto com as declarações -webkit-box, -webkit-box-orient e -webkit-line-clamp como aprimoramento progressivo, em vez de substituí-las. O trio com prefixo continua sendo a abordagem segura para produção atualmente.

O truncamento CSS prejudica a acessibilidade para leitores de tela?

Não. O truncamento CSS é puramente apresentacional, portanto a string completa permanece no DOM e os leitores de tela a leem integralmente sem necessidade de aria-label. O problema está no truncamento com JavaScript: uma abordagem com substring reescreve o nó do DOM, apagando o texto cortado para todos, incluindo tecnologias assistivas, a menos que você o preserve com um atributo title ou aria-label. Para conteúdo informativo, combine o truncamento CSS com um atributo title ou uma opção de expansão independentemente.