text-overflow -egenskapen i CSS håndterer situasjoner der tekst blir klippet når den renner over elementets rute. Den kan klippes (dvs. klippes av, skjules), vise en ellipsis (…, Unicode Range Value U + 2026) eller vise en forfatterdefinert streng (ingen gjeldende nettleserstøtte for forfatterdefinerte strenger).
Merk at text-overflow bare oppstår når beholderens overflow -egenskap har verdien hidden, scroll eller auto og white-space: nowrap;.
Tekstoverflyt kan bare skje på blokk- eller inline-block-nivåelementer, 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 oppførselen til text-overflow -egenskapen inkludert alle mulige verdier. Nettleserstøtten varierer!
Innstilling overflow til scroll eller auto viser rullefelt for å avsløre tilleggsteksten, mens hidden vil ikke. 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 hvis det ble droppet.
Det er en toverdisyntaks, f.eks 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-word kom fra. Det er ikke i spesifikasjonen eller i annen dokumentasjon enn på WebPlatform.org.
text-overflow -egenskapen pleide å være stenografi for kombinasjonen av text-overflow-mode og text-overflow-ellipsis, men ikke lenger, og de separate egenskapene eksisterer ikke.
Relaterte egenskaper
-
white-space -
overflow -
word-break -
width