Ciao mi chiamo Jacopo! Sono un UX/UI Designer e Front End Developer. Sul mio sito troverai articoli sullo sviluppo Front End

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
Ti sei iscritto con successo al blog di Jacopo Kahl - UX/UI Designer e Front End Developer
Bentornato! Hai effettuo l'accesso al blog.
Ottimo! Ti sei appena registrato.
Perfetto! Il tuo account è attivo, ed hai l'accesso a tutti i contenuti.