CSS Ellipsis början på sträng

ByDavid Walsh den 17 december 2018

  • 6

Jag var oerhört glad när CSS text-overflow: ellipsis (gift med fast width och overflow: hidden introducerades till CSS-specifikationerna och webbläsarna; funktionen gjorde det möjligt för oss att sluta försöka gifta oss med JavaScript-breddberäkning med strängbreddsberäkning och trunkering. CSS-ellips var också mycket vänlig för tillgänglighet. funktionen är utmärkt men är i huvudsak avsedd att ellipsa strängar bara i slutet; vad händer om vi vill ellipsa början på en skärm? Användningsfallet är ganska rimligt: tänk att visa en filväg – många gånger katalogen för en uppsättning filer är samma, i vilket fall du vill visa slutet på strängen, inte början. Låt mig visa dig ett trick för ellips vid strängens tiggeri!

CSS

Visar en ellips längst fram på en snöre är mos samma som ellips i slutet, bara med ett enkelt knep: För att lägga till en ellips i början av en sträng använder du RTL och och text-align för att klippa början på strängen! Att spela upp RTL från text-align är ett genialt sätt att få den önskade effekten av CSS-ellips i början av ett element eller en sträng. Det skulle vara jättebra för CSS-specifikationen att implementera ett mer robust ellipssystem, men för närvarande tillber jag fantastiska CSS-knep som detta!

Write a Comment

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *