Morsetto di linea - Trucchi CSS

La line-clampproprietà tronca il testo in corrispondenza di un numero di righe specifico.

La specifica è attualmente una bozza del redattore, quindi questo significa che nulla qui è scolpito nella pietra perché è un lavoro in corso. Detto questo, è definito come una scorciatoia per max-linese block-overflow, il primo dei quali è notato come a rischio di essere abbandonato nella Raccomandazione del candidato.

È facile vedere come max-linesverrebbe annullato poiché la sua funzione (l'impostazione del numero di righe prima del troncamento) è già incorporata line-clampe qualsiasi ulteriore astrazione potrebbe non essere necessaria. Ma questo ci porta fuori strada, quindi andiamo avanti.

Sintassi

.module ( line-clamp: (none | ); )

line-clamp accetta i seguenti valori nell'attuale bozza delle specifiche:

none: non imposta un massimo sul numero di righe e di conseguenza non avverrà alcun troncamento.
: imposta il numero massimo di righe prima di troncare il contenuto e quindi visualizza i puntini di sospensione (…) alla fine dell'ultima riga.

I puntini di sospensione dovrebbero essere visualizzati come un carattere Unicode (U + 2026) ma potrebbero essere sostituiti da un equivalente in base alla lingua del contenuto e alla modalità di scrittura dello User-Agent in uso.

Ehi, non posso farlo con text-overflow?

Domanda giusta, amico mio, e la risposta è, beh ...

(Vedi cosa ho fatto lì?)

... sorta.

text-overflowha effettivamente un ellipsisvalore che troncerà il testo:

.truncate ( text-overflow: ellipsis; /* Needed to make it work */ overflow: hidden; white-space: nowrap; )

Vedere l'overflow di testo della penna di Geoff Graham (@geoffgraham) su CodePen.

Bello bello, è un buon inizio. Ma cosa succede se vogliamo introdurre i puntini di sospensione non sulla prima riga ma da qualche parte, diciamo, la terza riga di testo?

È qui che line-clampentra in gioco. Tieni presente che per realizzarlo viene utilizzata una combinazione di tre proprietà:

.line-clamp ( display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; )

Vedi Pen line-clamp (-webkit) di Geoff Graham (@geoffgraham) su CodePen.

Firefox ora lo supporta, esattamente in questo modo (con i -webkit-prefissi e tutto il resto).

Allora, qual è il trucco?

A partire da ora, è il supporto del browser. I morsetti di linea fanno parte del CSS Overflow Module Level 3 che è attualmente in Editor's Draft e al momento totalmente non supportato.

Possiamo ottenere un'azione di blocco della linea con un -webkit-prefisso (che, stranamente, funziona su tutti i principali browser). In effetti, è così che è stata eseguita la demo sopra.

Potremmo seguire il percorso JavaScript se lo desideriamo. Clamp.js farà il trucco:

Vedi Pen line-clamp (clamp.js) di Geoff Graham (@geoffgraham) su CodePen.

Supporto browser

Questo è il supporto per l'implementazione non documentata e proprietaria di WebKit del morsetto di linea.

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.