Ik was ongelooflijk blij toen CSS text-overflow: ellipsis (getrouwd met vaste width en overflow: hidden was geïntroduceerd in de CSS-specificatie en browsers; de functie stelde ons in staat te stoppen met het proberen om JavaScript-breedteberekening te combineren met het berekenen en afkappen van stringbreedtes. CSS-ellips was ook erg toegankelijk voor toegankelijkheid. CSS text-overflow: ellipsis functie is geweldig, maar is in wezen bedoeld om strings alleen aan het einde weg te laten; wat als we het begin van een scherm willen weglaten? De use case is redelijk: denk aan het weergeven van een bestandspad – vaak de map voor een reeks bestanden is hetzelfde, in welk geval je “het einde van de string wilt weergeven, niet het begin. Laat me je een trucje voor ellipsis aan het begin van de string laten zien!

De CSS

Een ellips tonen aan de voorkant van een touwtje is mos tly hetzelfde als ellips aan het einde, maar met één simpele truc: om een ellips aan het begin van een string toe te voegen, gebruik RTL en en text-align om het begin van de string te knippen! RTL afspelen vanaf text-align is een geniale manier om het gewenste effect van CSS-ellipsis aan het begin van een element of string te krijgen. Het zou geweldig zijn voor de CSS-specificatie om een robuuster ellipsensysteem te implementeren, maar voorlopig aanbid ik geweldige CSS-trucs zoals deze!