Come troncare il testo con CSS -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.
Esempio
Compatibilità browser
Desktop
- Chrome 6
- Edge 17
- Firefox 68
- Internet Explorer NO
- Opera 15
- Safari 5
Mobile
- Android webview SI
- Chrome per Android 18
- Firefox per Android 68
- Opera per Android 14
- Safari per iOS 4.2
- Samsung Internet 4.0