CSS Ellipsis Begyndelse af streng

AfDavid Walsh den 17. december 2018

  • 6

Jeg var utrolig glad, da CSS text-overflow: ellipsis (gift med fast width og overflow: hidden introduceret til CSS spec og browsere; funktionen tillod os at stoppe med at gifte os med JavaScript bredde beregning med streng bredde beregning og trunkering. CSS ellipsis var også meget venlig over tilgængelighed. CSS text-overflow: ellipsis funktionen er fantastisk, men er i det væsentlige beregnet til at ellipse strenge kun i slutningen. Hvad hvis vi vil ellipse begyndelsen af en skærm? Brugssagen er ret rimelig: tænk at vise en filsti – mange gange biblioteket for et sæt filer er det samme, i hvilket tilfælde du vil vise slutningen af strengen, ikke begyndelsen. Lad mig vise dig et trick til ellipsis ved tiggeri af strengen!

CSS

Viser en ellipsis foran på en streng er mos det samme som ellipsen i slutningen, kun med et enkelt trick: Hvis du vil tilføje en ellipsis i begyndelsen af en streng, skal du bruge RTL og og text-align til at klippe begyndelsen af strengen! Afspilning af RTL fra text-align er en genial måde at få den ønskede effekt af CSS ellipsis i begyndelsen af et element eller en streng. Det ville være dejligt for CSS-specifikationen at implementere et mere robust ellipsesystem, men for nu tilbeder jeg fantastiske CSS-tricks som dette!

Write a Comment

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *