Propriedade CSS max-lines
Use a propriedade CSS max-lines para definir o número máximo de linhas do conteúdo. Veja exemplos e experimente você mesmo.
A propriedade CSS max-lines limita o número de linhas visíveis em um contêiner de bloco. Quando o conteúdo ultrapassa esse limite, as linhas extras são removidas da visualização e o comportamento de overflow do contêiner define o que acontece com elas. Na prática, você combina max-lines com block-overflow: clamp para que o texto seja cortado de forma limpa no limite da linha, em vez de ser interrompido no meio de um caractere.
Quando usar?
O caso de uso clássico é um teaser de "leia mais" em múltiplas linhas: um card, trecho de notícia ou descrição de produto que nunca deve crescer além de, digamos, três linhas, independentemente do tamanho do texto de origem. Sem um limite de linhas, um parágrafo longo empurra tudo abaixo dele para baixo e quebra o grid. O max-lines limita a altura em termos de linhas, em vez de uma height fixa em pixels, portanto o elemento permanece consistente mesmo quando o tamanho da fonte ou a altura da linha mudam.
max-lines é o bloco de construção detalhado. Duas propriedades relacionadas complementam o mesmo recurso:
- block-overflow — controla como a borda cortada é renderizada (por exemplo,
clampadiciona reticências no ponto de corte). - line-clamp — um shorthand que define
max-lineseblock-overflowjuntos em uma única declaração.
max-lines faz parte do CSS Overflow Module Level 4, ainda em evolução, e não está implementado por nenhum navegador principal no momento desta escrita. Para uso em produção hoje, utilize a propriedade -webkit-line-clamp, amplamente suportada (mostrada no exemplo abaixo). Sempre verifique o suporte atual antes de publicar — consulte a referência line-clamp do MDN.
Como o clamp funciona hoje (-webkit-line-clamp)
Como max-lines ainda não é utilizável, o equivalente prático é uma pequena combinação bem conhecida de propriedades:
.teaser {
display: -webkit-box; /* required for the clamp to apply */
-webkit-box-orient: vertical;/* stack the lines vertically */
-webkit-line-clamp: 3; /* keep only the first 3 lines */
overflow: hidden; /* hide everything past the clamp */
}Isso produz o mesmo resultado visual que max-lines: 3 foi projetado para: no máximo três linhas, com reticências (…) onde o texto é cortado. O exemplo a seguir usa tanto a sintaxe experimental max-lines quanto o fallback -webkit-line-clamp juntos, para que funcione de forma progressiva.
| Valor Inicial | none |
|---|---|
| Aplica-se a | Caixas de fragmento. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS Overflow Module Level 4 |
| Sintaxe DOM | object.style.maxLines = "2"; |
Sintaxe
max-lines: none | <integer> | initial | inherit;Exemplo da propriedade max-lines
O parágrafo abaixo está limitado a três linhas. As declarações max-lines e block-overflow têm como alvo navegadores que eventualmente implementarão a especificação; as declarações -webkit-box, -webkit-box-orient e -webkit-line-clamp fazem o mesmo efeito funcionar nos navegadores disponíveis hoje.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
width: 300px;
font-size: 16px;
line-height: 24px;
font-family: Helvetica, sans-serif;
overflow: hidden;
/* Experimental, spec-based syntax */
max-lines: 3;
block-overflow: clamp;
/* Widely supported fallback */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
</style>
</head>
<body>
<h2>Max-lines property example</h2>
<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, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>Valores
| Valor | Descrição |
|---|---|
| none | Nenhum número máximo de linhas é especificado. |
<integer> | Define o número de linhas antes de o conteúdo ser cortado. Valores negativos são inválidos. |
| initial | Define a propriedade com seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Problemas comuns
- Ainda não é uma opção real. Nenhum navegador principal implementa
max-lines, portanto depender somente dele deixa seu conteúdo sem corte. Sempre inclua o fallback-webkit-line-clamp. - O clamp precisa de
overflow: hidden. Seja commax-linesou com a abordagem-webkit-box, as linhas em excesso só ficam ocultas quando o overflow é cortado — sem isso, o texto ainda transborda. -webkit-line-clamprequer o display de caixa. Ele só tem efeito em um elemento comdisplay: -webkit-boxe-webkit-box-orient: vertical. Esquecer qualquer um deles é o motivo mais comum para o clamp "não fazer nada".- Conta linhas, não caracteres. Uma caixa mais larga ou uma fonte menor comporta mais texto por linha, portanto o mesmo valor de
max-linesexibe mais palavras. Use-o para restringir altura em linhas, não o comprimento exato do texto.
Propriedades relacionadas
- block-overflow — define como a borda cortada é renderizada.
- line-clamp — shorthand para
max-linesmaisblock-overflow. - text-overflow — adiciona reticências a uma única linha que transborda.
- overflow — controla o que acontece com qualquer conteúdo que excede sua caixa.