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

0 Commenti

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

Jacopo Kahl

Ciao mi chiamo Jacopo. Benvenuto/a sul mio sito web. Sono un appassionato del mondo delle nuove tecnologie e mi occupo di UX/UI e sviluppo Front-End.

Commenti