Indice
La proprietà -webkit-line-clamp
La proprietà -webkit-line-clamp
tronca il testo ad un numero specifico di linea.
Tutto funziona grazie alla combinazione della proprietà display
impostate a -webkit-box
o -webkit-inline-box
e la proprietà -webkit-box-orient
impostata come vertical
.
In molti casi si dovrà impostare overflow
su hidden
, altrimenti il contenuto non verrà troncato e dei puntini di sospensione verranno mostrati dopo uno specifico numero di righe.
Quando applicato agli elementi <a>, il testo potrebbe essere troncato nel mezzo e non necessariamente alla fine.
Sintassi
/* Keyword value */
-webkit-line-clamp: none;
/* <integer> values */
-webkit-line-clamp: 3;
-webkit-line-clamp: 10;
/* Global values */
-webkit-line-clamp: inherit;
-webkit-line-clamp: initial;
-webkit-line-clamp: unset;
none
Questo valore indica che il contenuto non verrà troncato
<integer>
Questo valore specifica il numero di linee dopo il quale il contenuto verrà troncato. Deve essere maggiore di 0.