Egenskaben text-overflow i CSS beskæftiger sig med situationer, hvor tekst klippes, når den overløber elementets boks. Det kan klippes (dvs. afskæres, skjules), vise en ellipsis (…, Unicode Range Value U + 2026) eller vise en forfatterdefineret streng (ingen nuværende browsersupport til forfatterdefinerede strenge).
Bemærk, at text-overflow kun opstår, når beholderens overflow egenskab har værdien hidden, scroll eller auto og white-space: nowrap;.
Tekstoverløb kan kun ske på blok- eller inline-blok-niveauelementer, fordi elementet skal have en bredde for at blive overflydet. Overløbet sker i retningen som bestemt af retningsegenskaben eller relaterede attributter.
Følgende demo viser opførslen for egenskaben text-overflow inklusive alle mulige værdier. Browsersupport varierer!
Indstilling overflow til scroll eller auto viser rullebjælker for at afsløre den ekstra tekst, mens hidden vil ikke. Den skjulte tekst kan vælges ved at vælge ellipserne.
Gamle ting
En gammel version af specifikationen siger, at du kan bruge en URL til et billede til ellipsen, men det ser ud som hvis det blev droppet.
Der er en syntaks med to værdier, f.eks text-overflow: ellipsis ellipsis;, der styrer overløbet på venstre og højre side af den samme container. Jeg er ikke sikker på, hvordan det ville være muligt at opnå. Måske centreret tekst i en for lille beholder? Den nye specifikation siger, at dette såvel som at definere en streng er “i fare.”
Jeg er ikke sikker på, hvor ellipsis-word kom fra. Det er ikke i spec eller i enhver anden dokumentation end på WebPlatform.org.
text-overflow -egenskaber plejede at være stenografi for kombinationen af text-overflow-mode og text-overflow-ellipsis, men ikke længere, og disse separate egenskaber findes ikke.
Relaterede egenskaber
-
white-space -
overflow -
word-break -
width