Un blog sullo sviluppo Front End, corsi WordPress, Data Science, Machine Leaning e Python.

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
You’ve successfully subscribed to Jacopo Kahl
Welcome back! You’ve successfully signed in.
Great! You’ve successfully signed up.
Your link has expired
Success! Check your email for magic link to sign-in.