Proprietà CSS max-lines
Usa la proprietà CSS max-lines per limitare il numero massimo di righe del contenuto. Esempi e prove interattive.
La proprietà CSS max-lines limita il numero di righe visibili in un contenitore a blocchi. Quando il contenuto supera quel limite, le righe in eccesso vengono rimosse dalla vista e la gestione dell'overflow del contenitore decide cosa farne. In pratica si abbina max-lines a block-overflow: clamp in modo che il testo venga troncato nettamente al confine della riga anziché essere tagliato a metà di un carattere.
Quando utilizzarla?
Il caso d'uso classico è un teaser "leggi di più" su più righe: una scheda, un frammento di notizia o una descrizione di prodotto che non deve mai crescere oltre, ad esempio, tre righe indipendentemente dalla lunghezza del testo sorgente. Senza un limite di righe, un paragrafo lungo spinge verso il basso tutto il contenuto sottostante e rompe la griglia. max-lines limita l'altezza in termini di righe anziché con un valore fisso in pixel per height, quindi il box rimane coerente anche quando cambiano la dimensione del font o l'altezza della riga.
max-lines è il componente fondamentale. Due proprietà correlate completano la stessa funzionalità:
- block-overflow — controlla come viene reso il bordo troncato (ad esempio,
clampaggiunge un'ellissi nel punto di taglio). - line-clamp — una shorthand che imposta
max-lineseblock-overflowinsieme in un'unica dichiarazione.
max-lines fa parte del CSS Overflow Module Level 4, ancora in evoluzione, e non è implementata da nessun browser principale al momento della stesura. Per il lavoro in produzione oggi, usa invece la proprietà -webkit-line-clamp, ampiamente supportata (mostrata nell'esempio qui sotto). Verifica sempre il supporto attuale prima di pubblicare — consulta il riferimento line-clamp di MDN.
Come funziona il clamp oggi (-webkit-line-clamp)
Poiché max-lines non è ancora utilizzabile, l'equivalente pratico è una piccola combinazione di proprietà ben nota:
.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 */
}Questo produce lo stesso risultato visivo che max-lines: 3 è progettato per ottenere: al massimo tre righe, con un'ellissi (…) dove il testo viene tagliato. L'esempio più in basso usa sia la sintassi sperimentale max-lines sia il fallback -webkit-line-clamp insieme, in modo che degradi in modo elegante.
| Valore iniziale | none |
|---|---|
| Si applica a | Fragment boxes. |
| Ereditato | No. |
| Animabile | No. |
| Versione | CSS Overflow Module Level 4 |
| Sintassi DOM | object.style.maxLines = "2"; |
Sintassi
max-lines: none | <integer> | initial | inherit;Esempio della proprietà max-lines
Il paragrafo qui sotto è limitato a tre righe. Le dichiarazioni max-lines e block-overflow si rivolgono ai browser che alla fine implementeranno la specifica; le dichiarazioni -webkit-box, -webkit-box-orient e -webkit-line-clamp producono lo stesso effetto nei browser attuali.
<!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>Valori
| Valore | Descrizione |
|---|---|
| none | Non viene specificato alcun numero massimo di righe. |
<integer> | Imposta il numero di righe prima che il contenuto venga troncato. I valori negativi non sono validi. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Errori comuni
- Non è ancora un'opzione reale. Nessun browser principale include
max-lines, quindi fare affidamento su di essa da sola lascia il contenuto non troncato. Includi sempre il fallback-webkit-line-clamp. - Il clamp richiede
overflow: hidden. Sia che si usimax-linessia l'approccio-webkit-box, le righe in eccesso vengono nascoste solo quando l'overflow è tagliato — senza di esso il testo continua a fuoriuscire. -webkit-line-clamprichiede il display box. Ha effetto solo su un elemento condisplay: -webkit-boxe-webkit-box-orient: vertical. Dimenticare uno dei due è il motivo più comune per cui il clamp "non fa nulla."- Conta le righe, non i caratteri. Un box più largo o un font più piccolo adatta più testo per riga, quindi lo stesso valore di
max-linesmostra più parole. Usala per limitare l'altezza in righe, non la lunghezza esatta del testo.
Proprietà correlate
- block-overflow — sceglie come viene reso il bordo troncato.
- line-clamp — shorthand per
max-linespiùblock-overflow. - text-overflow — aggiunge un'ellissi a una singola riga in overflow.
- overflow — controlla cosa succede al contenuto che supera il suo box.