Text-overflow - CSS-tricks | CSS Almanack 2025

Den text-overflowegendom i CSS hanterar situationer där text klipps när det flödar elementet ask. 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).

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

Observera att text-overflowendast inträffar när behållarens overflowegendom har värdet hidden, scrolleller autooch 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 text-overflowegenskapens beteende inklusive alla möjliga värden. Webbläsarstöd varierar!

Kolla in den här pennan!

Om du ställer overflowin scrolleller autokommer att visa rullningslister för att visa ytterligare text, medan det hiddeninte kommer att visas . 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 det ser ut som om den 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 riskzonen."

Jag är inte säker på varifrån ellipsis-word. Det finns inte i specifikationen eller i någon annan dokumentation än på WebPlatform.org.

Den text-overflowegendom som används för att vara en förkortning för kombinationen av text-overflow-modeoch text-overflow-ellipsis, men inte längre och de separata egenskaper inte existerar.