Elipsă CSS Începutul șirului

De David Walsh la 17 decembrie 2018

  • 6

Am fost incredibil de fericit când CSS text-overflow: ellipsis (căsătorit cu width și overflow: hidden fix introdus în specificațiile și browserele CSS; caracteristica ne-a permis să încetăm să încercăm să căsătorim calculul lățimii JavaScript cu calculul lățimii șirului și trunchierea. Elipsa CSS a fost, de asemenea, foarte prietenoasă accesibilității. CSS text-overflow: ellipsis caracteristica este grozavă, dar este în esență menită să elipseze șirurile doar la sfârșit; ce se întâmplă dacă vrem să elipsăm începutul unui ecran? este același lucru, caz în care doriți să afișați sfârșitul șirului, nu începutul. Permiteți-mi să vă arăt un truc pentru elipsa la cerșirea șirului!

CSS

Afișarea unei elipse în partea din față a unui șir este mos la fel ca punctele de suspensie la sfârșit, doar cu un singur truc simplu: Pentru a adăuga o puncte de suspensie la începutul unui șir, utilizați RTL și și text-align pentru a clipi începutul șirului! Redarea RTL off a text-align este o modalitate genială de a obține efectul dorit al elipsei CSS la începutul unui element sau șir. Ar fi minunat pentru specificațiile CSS să implementeze un sistem de elipsă mai robust, dar, deocamdată, mă închin la trucuri CSS uimitoare ca aceasta!

Write a Comment

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *