×
COME TRONCARE IL TESTO CON CSS -WEBKIT-LINE-CLAMP

Indice

  1. La proprietà -webkit-line-clamp
  2. Sintassi
  3. Esempio

La proprietà -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;

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