Egenskapen text-overflow i CSS hanterar situationer där text klipps när den rinner över elementets ruta. Det kan klippas (dvs klippas av, döljas), visa en ellips (…, Unicode Range Value U + 2026) eller visa en författardefinierad sträng (inget aktuellt webbläsarstöd för författardefinierade strängar).
Observera att text-overflow endast inträffar när behållarens overflow -egenskap har värdet hidden, scroll eller auto och white-space: nowrap;.
Textöverflöde kan bara ske på block- eller inline-blocknivåelement, eftersom elementet måste ha en bredd för att kunna överflödas. Överflödet sker i riktningen som bestäms av riktningsegenskapen eller relaterade attribut.
Följande demo visar beteendet för egenskapen text-overflow inklusive alla möjliga värden. Webbläsarstöd varierar!
Inställning overflow till scroll eller auto visar rullningsfält för att avslöja ytterligare text, medan hidden kommer inte. Den dolda texten kan väljas genom att välja ellipserna.
Gamla saker
En gammal version av specifikationen säger att du kan använda en URL till en bild för ellipsen, men den ser ut som om det tappades.
Det finns en syntax med två värden, t.ex. text-overflow: ellipsis ellipsis;, som skulle kontrollera överflödet på vänster och höger sida av samma behållare. Jag är inte säker på hur det skulle vara möjligt att uppnå. Centrerad text i en för liten behållare? Den nya specifikationen säger att detta, liksom att definiera en sträng, är ”i fara.”
Jag är inte säker på var ellipsis-word kommer ifrån. Det är inte i specifikationen eller i någon annan dokumentation än på WebPlatform.org.
Egenskapen text-overflow brukade vara stenografi för kombinationen av text-overflow-mode och text-overflow-ellipsis, men inte längre och de separata egenskaperna finns inte.
Relaterade egenskaper
-
white-space -
overflow -
word-break -
width