Tekst-overflow - CSS-triks | CSS-almanakk 2025

Den text-overfloweiendom i CSS omhandler situasjoner hvor tekst er klippet når det renner over elementets boksen. Den kan klippes (dvs. klippes av, skjules), vise en ellipsis ('...', Unicode Range Value U + 2026) eller vise en forfatterdefinert streng (ingen nåværende nettleserstøtte for forfatterdefinerte strenger).

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

Merk at det text-overflowbare skjer når containerens overfloweiendom har verdien hidden, scrolleller autoog white-space: nowrap;.

Tekstoverflyt kan bare skje på elementene i blokk- eller inline-blokknivå, fordi elementet må ha en bredde for å bli overflyttet. Overløpet skjer i retningen som bestemt av retningsegenskapen eller relaterte attributter.

Følgende demo viser text-overfloweiendommens oppførsel inkludert alle mulige verdier. Nettleserstøtte varierer!

Sjekk ut denne pennen!

Innstilling overflowtil scrolleller autovil vise rullefelt for å avsløre tilleggsteksten, mens hiddendet ikke vil. Den skjulte teksten kan velges ved å velge ellipsene.

Gamle ting

En gammel versjon av spesifikasjonen sier at du kan bruke en URL til et bilde for ellipsen, men det ser ut som om det ble droppet.

Det er en toverdisyntaks, for eksempel text-overflow: ellipsis ellipsis;som vil kontrollere overløpet på venstre og høyre side av samme container. Jeg er ikke sikker på hvordan det ville være mulig å oppnå. Kanskje sentrert tekst i en for liten beholder? Den nye spesifikasjonen sier at dette, i tillegg til å definere en streng, er "i fare."

Jeg er ikke sikker på hvor ellipsis-wordkom fra. Det er ikke i spesifikasjonen eller i annen dokumentasjon enn på WebPlatform.org.

Den text-overflowegenskapen pleide å være forkortelse for en kombinasjon av text-overflow-modeog text-overflow-ellipsis, men ikke lenger, og de separate eiendommer ikke eksisterer.