A propriedade line-clamp é uma forma de truncar (cortar) o texto após um número específico de linhas. No momento da publicação desta nota, essa propriedade está atualmente no Editor’s Draft, o que significa que pode mudar antes de ser publicada.

O que line-clamp faz de diferente de text-overflow?

O benefício da propriedade line-clamp é poder aplicá-la em qualquer linha. Se você decidir mostrar 3 linhas de texto e depois cortá-lo, basta definir o valor de line-clamp para 3. A propriedade text-overflow não nos dá esse controle sobre o ponto de corte do texto.

Sintaxe

.module {
  line-clamp: [none | <integer>];
}

A propriedade line-clamp aceita atualmente dois valores, que são:

• none: o conteúdo não será truncado;
• <integer>: o valor inserido define o número máximo de linhas antes de truncar o conteúdo, depois mostra reticências no final da última linha introduzida.

Demonstração

See the Pen CSS line-clamp demo by Michael Gearon (@michaelgearon) on CodePen.

Suporte dos navegadores

O suporte dos navegadores a essa propriedade está melhorando. Conferindo no caniuse.com, onde há suporte, há necessidade de utilização do prefixo -webkit-. Ela não funciona no Internet Explorer.

line-clamp para Firefox

A partir da sua versão 68, o Firefox suporta line-clamp usando o prefixo -webkit-. Desde 2016 o Firefox decidiu dar suporte para alguns prefixos -webkit-.

Você pode criar um fallback utilizando uma media query com @supports para verificar se o seu navegador de trabalho (ou de teste) suporta line-clamp.

Fonte: Michael Gearon.