css

Come troncare il testo con CSS -webkit-line-clamp

di Jacopo Kahl 8 mesi fa 1 min lettura

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

Leggi altri post di

Jacopo Kahl

Hi my name is Jacopo. I am a Front End developer with the ambition to become a Data Scientist. In this blog you will find my study notes.