Text overflow CSS: ellipsis, line clamp e interruzione delle parole
Laboratorio di overflow e troncamento del testo CSS
Text overflow CSS: ellipsis, line clamp, word break | We.Inc
Ridimensiona un box che contiene un URL lungo e una parola composta tedesca, poi prova dal vivo overflow, text-overflow: ellipsis, line clamp, word-break, overflow-wrap e hyphens, con le classi Tailwind.
Un contenuto lungo esce dal suo box quando il box è troppo piccolo. overflow decide cosa succede all'eccesso: visible, hidden, clip, scroll o auto. Per una sola riga che finisce con i puntini, combina white-space: nowrap, overflow: hidden e text-overflow: ellipsis. Per più righe usa -webkit-line-clamp. Per spezzare parole che non si possono dividere, usa overflow-wrap: anywhere.
Il box ha bisogno di una propria barra di scorrimento
overflow: auto
Trascina il cursore della larghezza e il box di esempio si restringe attorno a un vero indirizzo web, alla parola Donaudampfschifffahrtsgesellschaft e a una frase normale. Ogni opzione di overflow, a capo e clamp è un pulsante, il risultato è immediato e il CSS che ti servirebbe è scritto sotto.
Scegli il testo di esempio da caricare: un URL, una lunga parola composta o un paragrafo.
Trascina il cursore della larghezza finché il testo non entra più.
Prova uno alla volta i valori di overflow, l'ellipsis, un line clamp e le opzioni di interruzione delle parole.
Copia il CSS che corrisponde al risultato che ti piace.
L'ellipsis ha bisogno di tutti e tre: nowrap, un overflow diverso da visible e un limite di larghezza. Se ne manca anche uno solo, i puntini non compaiono.
In una riga flex, un figlio troncato ha bisogno anche di min-width: 0, perché per impostazione predefinita gli elementi flex si rifiutano di restringersi sotto il loro contenuto.
Metti il testo completo in un attributo title o mostralo al focus, perché il troncamento nasconde parole a chi non può usare l'hover.
hyphens: auto mette il trattino solo quando l'elemento o un genitore ha un attributo lang per cui il browser ha un dizionario.
Domande frequenti
Perché text-overflow: ellipsis non funziona?
Di solito manca uno dei suoi partner. L'elemento deve essere block o inline-block con una larghezza vincolata, avere overflow impostato su hidden o clip e tenere il testo su una riga con white-space: nowrap. In un elemento flex o grid, aggiungi anche min-width: 0 così l'elemento può restringersi.
line-clamp è supportato senza il prefisso -webkit-?
La forma con prefisso, -webkit-line-clamp insieme a display: -webkit-box e -webkit-box-orient: vertical, funziona in tutti i principali browser attuali ed è ciò che produce Tailwind. La proprietà line-clamp senza prefisso di CSS Overflow Level 4 è ancora in fase di diffusione, quindi controlla caniuse prima di affidarti solo a quella.
Qual è la differenza tra word-break e overflow-wrap?
overflow-wrap spezza una parola solo quando altrimenti uscirebbe dal box, quindi le parole normali vanno a capo normalmente. word-break: break-all permette al browser di spezzare ovunque tra due lettere qualsiasi, il che dà un testo frastagliato e difficile da leggere. word-break: keep-all serve per il testo cinese, giapponese e coreano quando non vuoi interruzioni dentro le parole.
Cosa fa overflow: clip che hidden non fa?
Entrambi tagliano l'eccesso. hidden crea comunque uno scroll container, quindi uno script può scorrerlo e influisce su position: sticky al suo interno. clip vieta ogni scorrimento, e con overflow-clip-margin puoi lasciare che il contenuto sbordi di qualche pixel oltre il bordo prima di essere tagliato.
Come tronco il testo dentro una cella di tabella?
Imposta table-layout: fixed sulla tabella e una larghezza sulle colonne, poi applica alla cella il solito trio nowrap, hidden ed ellipsis. Senza layout fisso la colonna semplicemente si allarga per contenere il testo. Un'altra opzione è max-width: 0 con width: 100% sulla cella.
I cinque valori di overflow
visible è il valore predefinito e lascia che il contenuto venga disegnato fuori dal box senza influire sul layout circostante. hidden e clip lo tagliano al bordo del padding. scroll mostra sempre le barre di scorrimento, anche quando nulla esce dal box, e auto le mostra solo quando servono, che è quasi sempre la scelta migliore.
overflow è la scorciatoia di overflow-x e overflow-y. Impostare un asse su visible e l'altro su hidden non funziona come scritto: in quella combinazione il browser calcola visible come auto, quindi potresti vedere una barra di scorrimento inattesa. clip è l'eccezione e si può combinare con visible.
Spezzare le parole che non entrano
overflow-wrap: break-word spezza le parole lunghe quando serve, ma non lascia che il box si restringa sotto la parola più lunga, quindi può comunque uscire dal box dentro elementi flex e tabelle. overflow-wrap: anywhere abbassa anche quella dimensione minima, ed è per questo che risolve gli URL lunghi nelle sidebar strette.
hyphens: auto inserisce un trattino a un confine di sillaba corretto per le lingue supportate dal browser, rendendo molto più leggibile il testo tedesco e olandese giustificato o stretto. Alcune versioni di Safari capiscono solo -webkit-hyphens, quindi scrivili entrambi. Usa hyphens: manual e il trattino morbido ­ quando vuoi scegliere tu i punti di interruzione.
Troncamento e accessibilità
Il testo tagliato è ancora nella pagina, quindi gli screen reader lo leggono per intero, ed è un bene. A perderci sono gli utenti vedenti che usano tastiera e touch, perché non possono passare con il mouse per vedere un tooltip.
Per nomi di prodotti o messaggi importanti, offri un modo per espandere il testo, come un pulsante Mostra di più o un elemento details, invece di affidarti solo all'ellipsis. Riserva i line clamp alle anteprime in cui il testo completo è a un clic di distanza.
Valori di overflow a confronto
Cosa fa ogni valore di overflow
Valore
Contenuto in eccesso
Barre di scorrimento
Scroll container?
Tailwind
Disegnato fuori dal box
Mai
No
Tagliato al bordo del padding
Mai
Sì (scorrevole via script)
Tagliato
Mai
No
Scorre
Sempre visibili
Sì
Scorre
Solo quando servono
Sì
Ellipsis su una riga
La ricetta dell'ellipsis in tre righe
Togli una qualsiasi delle tre dichiarazioni e i puntini spariscono. L'attributo title mantiene disponibile il testo completo.
Ellipsis in una riga flex
L'elemento centrale riceve min-width: 0 così può restringersi sotto la larghezza del suo testo. Senza, è la riga a uscire dal box.
Clamp su più righe
Limitare a tre righe la descrizione di una card
Lo schema con prefisso qui sotto è quello ampiamente supportato. La dichiarazione line-clamp semplice è aggiunta per i browser che la gestiscono già.
word-break, overflow-wrap e hyphens a confronto
Spezzare le parole lunghe
Dichiarazione
Dove spezza
Ideale per
Tailwind
overflow-wrap: break-word
Dentro una parola solo se uscirebbe dal box
Testo con qualche parola lunga occasionale
overflow-wrap: anywhere
Uguale, e permette al box di restringersi
URL in elementi flex e colonne strette
wrap-anywhere (v4.1)
word-break: break-all
Tra lettere qualsiasi, sempre
Codice, hash, ID
word-break: keep-all
Mai dentro le parole CJK
Cinese, giapponese, coreano
hyphens: auto
Alle sillabe, con un trattino
Testo stretto o giustificato con lang impostato
Lo stesso URL con quattro impostazioni di interruzione
Ogni box è largo 160px. Solo l'ultimo è lasciato uscire dal box.
Troncare le celle di tabella
Layout di tabella fisso con celle in ellipsis
table-layout: fixed fa prevalere le larghezze delle colonne sul contenuto, così l'ellipsis può entrare in azione.
URL lungo
Parola composta tedesca
Paragrafo
I chicchi di caffè freschi vengono tostati ogni martedì e spediti il pomeriggio stesso, così raggiungono la maggior parte degli indirizzi entro tre giorni dalla tostatura, quando il sapore è ancora al meglio.
Da sola l'ellipsis ha bisogno di white-space: nowrap (o di un line clamp).
L'ellipsis ha bisogno di overflow impostato su hidden o clip.
Un line clamp ha bisogno di overflow: hidden per tagliare il resto.