Text-overflow - Trucchi CSS | CSS Almanac 2025

La text-overflowproprietà in CSS si occupa di situazioni in cui il testo viene ritagliato quando supera la casella dell'elemento. Può essere ritagliato (cioè tagliato, nascosto), visualizzare un'ellissi ('…', valore intervallo Unicode U + 2026) o visualizzare una stringa definita dall'autore (nessun supporto del browser corrente per le stringhe definite dall'autore).

.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )

Si noti che text-overflowsi verifica solo quando il contenitore overflowproprietà ha il valore hidden, scrollo autoe white-space: nowrap;.

L'overflow del testo può verificarsi solo su elementi a livello di blocco o inline-block, perché l'elemento deve avere una larghezza per essere overflow. L'overflow si verifica nella direzione determinata dalla proprietà direction o dagli attributi correlati.

La seguente demo mostra il comportamento della text-overflowproprietà includendo tutti i possibili valori. Il supporto del browser varia!

Dai un'occhiata a questa penna!

L'impostazione overflowsu scrollo autovisualizzerà le barre di scorrimento per rivelare il testo aggiuntivo, mentre hiddenno. Il testo nascosto può essere selezionato selezionando i puntini di sospensione.

Roba vecchia

Una vecchia versione della specifica dice che potresti usare un URL a un'immagine per i puntini di sospensione, ma sembra che sia stato eliminato.

Esiste una sintassi a due valori, ad esempio text-overflow: ellipsis ellipsis;, che controllerebbe l'overflow sui lati sinistro e destro dello stesso contenitore. Non sono sicuro di come sarebbe possibile ottenere ciò. Forse testo centrato in un contenitore troppo piccolo? La nuova specifica dice che questo, oltre a definire una stringa, è "a rischio".

Non sono sicuro da dove venga ellipsis-word. Non è nelle specifiche o in qualsiasi altra documentazione diversa da WebPlatform.org.

La text-overflowproprietà era una scorciatoia per la combinazione di text-overflow-modee text-overflow-ellipsis, ma non più e quelle proprietà separate non esistono.