Propriedade CSS line-clamp
Use a propriedade abreviada CSS line-clamp para especificar em qual linha o texto deve ser cortado. Definição, valores e exemplos.
A propriedade line-clamp trunca um bloco de texto em um número especificado de linhas, adicionando reticências (…) no ponto onde o texto é cortado. É a forma padrão de criar prévias de múltiplas linhas com "Leia mais" — por exemplo, limitando a descrição de um cartão a três linhas, independentemente do tamanho do texto original.
Esta página aborda a sintaxe, um exemplo funcional, as propriedades auxiliares das quais line-clamp depende, o suporte dos navegadores e o prefixo -webkit-, além das limitações da propriedade.
Por que usar line-clamp
Antes do line-clamp, limitar o texto a uma linha exigia combinar overflow: hidden, white-space: nowrap e text-overflow: ellipsis. Esse truque funciona apenas para uma única linha — white-space: nowrap mantém tudo em uma única linha. O line-clamp resolve o caso de múltiplas linhas, quando você quer, por exemplo, exatamente três linhas quebradas seguidas de reticências.
Sintaxe
line-clamp: none | <integer>;Use none para desativar o corte, ou um número inteiro positivo para o número máximo de linhas a exibir.
Exemplo da propriedade line-clamp
O exemplo abaixo limita o parágrafo a três linhas. Observe as três propriedades complementares — display: -webkit-box, -webkit-box-orient: vertical e overflow: hidden — que são necessárias para que o corte funcione (veja Propriedades auxiliares abaixo).
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
align-items: center;
background: radial-gradient( farthest-side at bottom left, #eee, #ccc),
radial-gradient( farthest-corner at bottom right, #eee, #ccc 400px);
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
line-height: 1.5;
}
.element {
background-color: #fff;
box-shadow: 1px 1px 10px #666;
padding: 2em;
width: 200px;
}
.element p {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<h2>CSS line-clamp property example</h2>
<div class="element">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</body>
</html>Resultado
![Propriedade CSS line-clamp](/uploads/media/default/0001/04/510c4d8bde7d07ba0ff1b843ad8b4dfdc122aadf.png "CSS line-clamp property result" =420x)
No exemplo dado, o texto é cortado na terceira linha. Como -webkit-line-clamp é a forma implementada pelos navegadores, tanto -webkit-line-clamp: 3 quanto o padrão line-clamp: 3 são declarados para que a regra funcione em todos os navegadores hoje e permaneça válida à medida que a propriedade sem prefixo ganha suporte.
Propriedades auxiliares
line-clamp não funciona sozinha. O elemento deve estabelecer um flex box e ocultar o overflow:
| Propriedade | Por que é necessária |
|---|---|
display: -webkit-box | Muda o elemento para o layout flexbox legado no qual line-clamp é definido. |
-webkit-box-orient: vertical | Organiza as linhas da caixa verticalmente para que possam ser contadas e cortadas. |
overflow: hidden | Oculta as linhas além do limite; sem ele, o texto transborda e nenhuma reticência aparece. |
Valores
| Valor | Descrição |
|---|---|
| none | Nenhum número máximo de linhas e sem truncamento. |
<integer> | Define o número máximo de linhas antes de truncar o conteúdo e exibir reticências. |
Limitações da propriedade CSS line-clamp
A propriedade é conveniente, mas apresenta algumas restrições que vale conhecer:
- Ela depende do prefixo
-webkit-. Em todos os navegadores disponíveis, a propriedade que funciona é-webkit-line-clamp. Oline-clampsem prefixo faz parte do CSS Overflow Module Level 4 e está sendo adotado, mas ainda é preciso declarar a versão prefixada para compatibilidade. - Não é possível personalizar as reticências. O caractere de truncamento é fixo e pode não se adequar a todos os idiomas ou renderizações de fontes.
- Requer várias propriedades auxiliares para funcionar — não é possível usá-la em um elemento de bloco simples:
.element {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}Você pode envolver as regras em uma consulta de recurso quando precisar detectar suporte antes de aplicá-las:
@supports (-webkit-line-clamp: 2) {
.element {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}| Valor Inicial | none |
|---|---|
| Aplica-se a | - |
| Herdado | Sim. |
| Animável | Não. |
| Versão | CSS Overflow Module Level 4 |
| Sintaxe DOM | object.style.lineClamp = "2"; |
Nota: display: -webkit-box é uma implementação flexbox legada e não padronizada, usada por navegadores WebKit mais antigos. É mantida aqui apenas como fallback para compatibilidade.
Tópicos relacionados
- CSS
text-overflow— limitar uma única linha com reticências. - CSS
overflow— controlar como o conteúdo que transborda é exibido ou ocultado. - CSS
white-space— gerenciar a quebra de linha, complemento ao truncamento de linha única. - CSS
overflow-wrap— quebrar palavras longas para que não transbordem.