Proprietà CSS line-clamp
Usa la proprietà shorthand CSS line-clamp per specificare a quale riga il testo deve essere troncato. Definizione, valori ed esempi.
La proprietà line-clamp tronca un blocco di testo a un numero specificato di righe, aggiungendo un'ellissi (…) nel punto in cui il testo viene tagliato. È il metodo standard per creare anteprime "Leggi di più" su più righe — ad esempio, limitando la descrizione di una card a tre righe indipendentemente dalla lunghezza del testo sorgente.
Questa pagina tratta la sintassi, un esempio funzionante, le proprietà di supporto da cui dipende line-clamp, il supporto dei browser e il prefisso -webkit-, oltre ai limiti della proprietà.
Perché usare line-clamp
Prima di line-clamp, troncare il testo a una riga significava combinare overflow: hidden, white-space: nowrap e text-overflow: ellipsis. Questo trucco funziona solo per una singola riga — white-space: nowrap mantiene tutto su una sola riga. line-clamp risolve il caso su più righe, quando si desidera, ad esempio, esattamente tre righe a capo seguite da un'ellissi.
Sintassi
line-clamp: none | <integer>;Usa none per disabilitare il troncamento, oppure un numero intero positivo per il numero massimo di righe da mostrare.
Esempio della proprietà line-clamp
L'esempio seguente tronca il paragrafo a tre righe. Nota le tre proprietà di accompagnamento — display: -webkit-box, -webkit-box-orient: vertical e overflow: hidden — necessarie perché il troncamento abbia effetto (vedi Proprietà di supporto di seguito).
<!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>Risultato
![Proprietà CSS line-clamp](/uploads/media/default/0001/04/510c4d8bde7d07ba0ff1b843ad8b4dfdc122aadf.png "CSS line-clamp property result" =420x)
Nell'esempio mostrato, il testo viene tagliato alla terza riga. Poiché -webkit-line-clamp è la forma effettivamente implementata dai browser, vengono dichiarate sia -webkit-line-clamp: 3 che la versione standard line-clamp: 3, in modo che la regola funzioni ovunque oggi e rimanga valida quando la proprietà senza prefisso acquisirà supporto.
Proprietà di supporto
line-clamp non funziona da sola. L'elemento deve stabilire un flex box e nascondere l'overflow:
| Proprietà | Perché è necessaria |
|---|---|
display: -webkit-box | Passa l'elemento al layout flexbox legacy su cui è definito line-clamp. |
-webkit-box-orient: vertical | Dispone le righe del box in verticale in modo che possano essere conteggiate e troncate. |
overflow: hidden | Nasconde le righe oltre il limite; senza di essa il testo va in overflow e non appare alcuna ellissi. |
Valori
| Valore | Descrizione |
|---|---|
| none | Nessun numero massimo di righe e nessun troncamento. |
<integer> | Imposta il numero massimo di righe prima di troncare il contenuto e quindi mostra un'ellissi. |
Limitazioni della proprietà CSS line-clamp
La proprietà è comoda ma presenta alcune limitazioni da conoscere:
- Si basa sul prefisso
-webkit-. In tutti i browser in circolazione la proprietà funzionante è-webkit-line-clamp. La versione senza prefissoline-clampfa parte del CSS Overflow Module Level 4 ed è in fase di adozione, ma dovresti comunque dichiarare la versione con prefisso per compatibilità. - Non è possibile personalizzare l'ellissi. Il carattere di troncamento è fisso e potrebbe non adattarsi bene a ogni lingua o rendering del font.
- Richiede diverse proprietà di supporto per avere effetto — non è possibile usarla su un semplice elemento blocco:
.element {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}Puoi racchiudere le regole in una feature query quando hai bisogno di rilevare il supporto prima di applicarle:
@supports (-webkit-line-clamp: 2) {
.element {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}| Valore iniziale | none |
|---|---|
| Si applica a | - |
| Ereditato | Sì. |
| Animabile | No. |
| Versione | CSS Overflow Module Level 4 |
| Sintassi DOM | object.style.lineClamp = "2"; |
Nota: display: -webkit-box è un'implementazione flexbox legacy e non standard usata dai vecchi browser WebKit. È mantenuta qui esclusivamente come fallback per compatibilità.
Argomenti correlati
- CSS
text-overflow— tronca una singola riga con un'ellissi. - CSS
overflow— controlla come viene mostrato o nascosto il contenuto in overflow. - CSS
white-space— gestisce l'a capo automatico, complemento al troncamento su riga singola. - CSS
overflow-wrap— spezza le parole lunghe in modo che non vadano in overflow.