Pinça de linha - CSS-Tricks | CSS Almanac 2025

A line-clamppropriedade trunca o texto em um número específico de linhas.

A especificação para ele é atualmente um Rascunho do Editor, o que significa que nada aqui está definido porque é um trabalho em andamento. Dito isso, é definido como uma abreviação de max-linese block-overflow, o primeiro dos quais é apontado como em risco de ser descartado na recomendação do candidato.

É fácil ver como max-linesseria anulado, uma vez que sua função (definir o número de linhas antes de truncar) já está embutida line-clampe qualquer outra abstração pode ser desnecessária. Mas isso está nos tirando do caminho, então vamos em frente.

Sintaxe

.module ( line-clamp: (none | ); )

line-clamp aceita os seguintes valores no rascunho atual da especificação:

none: não define nenhum máximo para o número de linhas e nenhum truncamento acontecerá como resultado.
: define o número máximo de linhas antes de truncar o conteúdo e exibe reticências (…) no final da última linha.

Essas reticências devem ser renderizadas como um caractere Unicode (U + 2026), mas podem ser substituídas por um equivalente com base no idioma do conteúdo e no modo de escrita do Agente do Usuário em uso.

Ei, não posso fazer isso com estouro de texto?

Pergunta justa, meu amigo, e a resposta é, bem ...

(Veja o que eu fiz lá?)

… Sorta.

text-overflowrealmente tem um ellipsisvalor que truncará o texto:

.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )

Veja o Pen text-overflow de Geoff Graham (@geoffgraham) no CodePen.

Legal, bom começo. Mas e se quisermos introduzir as reticências não na primeira linha, mas em algum lugar, digamos, na terceira linha do texto?

É aí que line-clampentra em jogo. Observe que uma combinação de três propriedades é usada para fazer isso acontecer:

.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )

Veja o Pen line-clamp (-webkit) de Geoff Graham (@geoffgraham) no CodePen.

O Firefox suporta isso agora, exatamente desta forma (com os -webkit-prefixos e tudo).

Então, qual é o truque?

A partir de agora, é o suporte do navegador. As pinças de linha fazem parte do Módulo CSS Overflow Nível 3, que está atualmente em Editor's Draft e totalmente sem suporte no momento.

Podemos obter alguma ação de fixação de linha com um -webkit-prefixo (que, estranhamente, funciona em todos os principais navegadores). Na verdade, foi assim que a demonstração acima foi feita.

Poderíamos seguir o caminho do JavaScript, se quisermos. Clamp.js resolverá o problema:

Veja o Pen line-clamp (clamp.js) de Geoff Graham (@geoffgraham) no CodePen.

Suporte para navegador

Este é o suporte para a propriedade do WebKit e a implementação não documentada de pinça de linha.

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.