Proprietà CSS block-overflow

La proprietà block-overflow controlla cosa accade nel punto in cui un contenitore a blocchi viene troncato nella direzione del blocco (verticalmente, nelle modalità di scrittura orizzontale). Invece di tagliare semplicemente il testo, consente di contrassegnare il punto di troncamento con dei puntini di sospensione (…) o una stringa personalizzata, segnalando al lettore che il contenuto continua.

Fa parte del CSS Overflow Module Level 4 ed è la controparte multi-riga di text-overflow: mentre text-overflow: ellipsis tronca una singola riga nella direzione inline, block-overflow controlla il marcatore mostrato quando il contenuto viene troncato su più righe (ad esempio tramite max-lines o line-clamp).

block-overflow ha effetto solo in un punto di troncamento forzato — ad esempio l'ultima riga visibile consentita da max-lines, o la casella di riga immediatamente prima di un'interruzione di regione. Da sola non limita il numero di righe visualizzate; abbinala a max-lines per ottenere questo risultato.

Sintassi

block-overflow: clip | ellipsis | <string>;

Il valore è una singola parola chiave (clip o ellipsis) oppure una <string> tra virgolette.

Troncamento di più righe

block-overflow è pensata per funzionare insieme a max-lines, che limita il numero di righe, e alla proprietà continue, che contrassegna il box come troncabile. L'esempio seguente limita la descrizione di una card a tre righe e mostra i puntini di sospensione sulla terza:

.card-description {
  max-lines: 3;            /* keep only the first three lines      */
  continue: discard;       /* truncate the rest                    */
  block-overflow: ellipsis; /* show … at the truncation point      */
}

<p class="card-description">
  This description is long enough to wrap onto many lines. Only the
  first three are kept, and the third ends with an ellipsis so the
  reader knows the text continues beyond what is shown here.
</p>

Poiché nessun browser supporta ancora questo insieme di proprietà, l'equivalente pratico che funziona in produzione è line-clamp:

.card-description {
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

Relazione con line-clamp

La proprietà line-clamp è una shorthand che imposta max-lines, block-overflow e continue contemporaneamente. Scrivere line-clamp: 3 implica block-overflow: ellipsis e limita il blocco a tre righe, quindi raramente si imposta block-overflow direttamente — è line-clamp a farlo al posto tuo.

Valori

Una stringa personalizzata sostituisce i puntini di sospensione predefiniti. Questo è utile per marcatori di troncamento localizzati o di brand come "… leggi di più":

.custom-ellipsis {
  block-overflow: "… read more";
}

block-overflow vs. text-overflow

Queste due proprietà risolvono problemi correlati su assi diversi e possono essere facilmente confuse:

Se hai bisogno di un titolo su una riga che termina con i puntini di sospensione, usa text-overflow. Se hai bisogno di un estratto su più righe che termina con i puntini di sospensione, usa line-clamp oggi (e block-overflow una volta che i browser lo supporteranno).

Esercitazione