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;

Questo valore indica che il contenuto non verrà troncato

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