La proprietà text-overflow in CSS si occupa di situazioni in cui il testo viene troncato quando supera la casella dellelemento. Può essere ritagliato (ovvero tagliato, nascosto), visualizzare unellissi (“…”, Valore intervallo Unicode U + 2026) o visualizzare una stringa definita dallautore (nessun supporto del browser corrente per le stringhe definite dallautore).
Tieni presente che text-overflow si verifica solo quando la proprietà overflow del contenitore ha il valore hidden, scroll o auto e white-space: nowrap;.
Loverflow del testo può avvenire solo su elementi di livello block o inline-block, perché lelemento deve avere una larghezza per essere overflow. Loverflow si verifica nella direzione determinata dalla proprietà direction o dagli attributi correlati.
La seguente demo mostra il comportamento della proprietà text-overflow inclusi tutti i valori possibili. Il supporto del browser varia!
Impostazione overflow a scroll o auto visualizzeranno le barre di scorrimento per rivelare il testo aggiuntivo, mentre hidden no. Il testo nascosto può essere selezionato selezionando i puntini di sospensione.
Vecchie cose
Una vecchia versione delle specifiche dice che potresti usare un URL per unimmagine per i puntini di sospensione, ma sembra se è stato eliminato.
Cè una sintassi a due valori, ad es text-overflow: ellipsis ellipsis;, che controllerebbe loverflow sui lati sinistro e destro dello stesso contenitore. Non sono sicuro di come sarebbe possibile ottenere ciò. Forse il 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 provenga ellipsis-word. Non è in la specifica o in qualsiasi altra documentazione diversa da WebPlatform.org.
La proprietà text-overflow era labbreviazione della combinazione di text-overflow-mode e text-overflow-ellipsis, ma non più e queste proprietà separate non esistono.
Proprietà correlate
-
white-space -
overflow -
word-break -
width