Den text-overflowejendom i CSS omhandler situationer, hvor teksten er klippet, når det løber elementet æske. Det kan klippes (dvs. afskæres, skjules), vise en ellipsis ('...', Unicode Range Value U + 2026) eller vise en forfatterdefineret streng (ingen nuværende browserunderstøttelse af forfatterdefinerede strenge).
.ellipsis ( text-overflow: ellipsis; /* Required for text-overflow to do anything */ white-space: nowrap; overflow: hidden; )Bemærk, at det text-overflowkun sker, når containerens overflowejendom har værdien hidden, scrolleller autoog white-space: nowrap;.
Tekstoverløb kan kun ske på blok- eller inline-block-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 text-overflowegenskaben for ejendommen inklusive alle mulige værdier. Browsersupport varierer!
Indstilling overflowtil scrolleller autoviser rullepaneler for at afsløre den ekstra tekst, mens hiddendet ikke vil. Den skjulte tekst kan vælges ved at vælge ellipserne.
Gamle ting
En gammel version af specifikationen siger, at du kunne bruge en URL til et billede til ellipsen, men det ser ud som om det blev droppet.
Der er en toværdisyntaks, 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-wordkom fra. Det er ikke i specifikationen eller i nogen anden dokumentation end på WebPlatform.org.
Den text-overflowejendom, der anvendes til at være forkortelse for kombinationen af text-overflow-modeog text-overflow-ellipsis, men ikke længere, og de særskilte egenskaber ikke eksisterer.
Browsersupport
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 25+ | 5.1+ | 19+ | 12.1+ | IE8 + | 2.1+ | 3.2+ |