Su PixelHub trovi corsi, articoli e script per lo sviluppo Web, il Web Marketing e il Social Media Marketing.

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

Ti sei iscritto con successo a PixelHub | Creativi Digitali 💻
Bentornatə! Hai effettuato correttamente l'accesso.
Ottimo! Iscrizione effettuata con successo.
Il link è scaduto
Ottimo! Controlla la tua email per il link di accesso.