La block-overflowproprietà tronca il testo e indica che segue più contenuto inserendo un'ellissi o una stringa personalizzata dopo un numero di righe impostato dalla max-linesproprietà.
La proprietà è stata introdotta nella bozza dell'editor della specifica CSS Overflow Module Level 3. Ciò significa che al momento è sperimentale e considerato un work in progress. In effetti, puoi seguire la conversazione che include chiacchiere sulla ridenominazione della proprietà del tutto.
Sintassi
.module ( block-overflow: (clip | ellipsis | ); max-lines: (); /* required by block-overflow */ )block-overflow accetta i seguenti valori:
clip: Non inserisce un carattere per indicare più testo da seguire. Invece, il contenuto viene semplicemente troncato e tagliato all'ultimo carattere.ellipsis: Visualizza un'ellissi (…) alla fine dell'ultima riga. Dovrebbe essere visualizzato come carattere Unicode (U + 2026) ma potrebbe essere sostituito da un equivalente basato sulla lingua del contenuto e sulla modalità di scrittura dello User-Agent in uso.: Visualizza il testo personalizzato (ad es. "Leggi di più →") alla fine dell'ultima riga. La specifica dice che lo User-Agent può sostituire la stringa con i puntini di sospensione se la stringa è "assurdamente" lunga.
Ancora una volta, tutto questo è un lavoro sperimentale in corso. Questi valori potrebbero cambiare. Oppure si potrebbe aggiungere di più. Ad esempio, ci sono state richieste di puntini di sospensione "più intelligenti" che potrebbero essere in grado di fare più cose, come ritagliare il testo al centro:
One thing led to another and… yada yada yada, that was that.Usa line-clampin breve
Possiamo ottenere quasi la stessa cosa usando line-clampche è una scorciatoia per le proprietà block-overflowe max-lines.
Come è attualmente definito, tuttavia, line-clampaccetta solo un singolo valore numerico max-linese viene impostato implicitamente block-overflowsul ellipsisvalore. Quindi, se vuoi usare una stringa personalizzata per il troncamento, devi invece usare la forma lunga.
Supporto browser
Nessuno al momento, ma puoi ottenere supporto utilizzando l'implementazione proprietaria di WebKit di line-clamp:
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 14 * | 68 * | No | 17 | 5 * |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | 85 * | 2.3 * | 5,0-5,1 * |