CSS Ellipsis Beginning of String

ByDavid Walsh 17. desember 2018

  • 6

Jeg var utrolig glad da CSS text-overflow: ellipsis (gift med fast width og overflow: hidden introdusert til CSS-spesifikasjonene og nettleserne; funksjonen tillot oss å slutte å prøve å gifte oss med JavaScript-breddeutregning med strengbreddeberegning og avkorting. CSS-ellipsis var også veldig vennlig for tilgjengelighet. funksjonen er flott, men er egentlig ment å ellipse strenger bare på slutten. Hva om vi ønsker å ellipse begynnelsen av en skjerm? Brukstilfellet er ganske rimelig: tenk å vise en filsti – mange ganger katalogen for et sett med filer er det samme, i så fall vil du vise slutten på strengen, ikke begynnelsen. La meg vise deg et triks for ellipsis ved tigging av strengen!

CSS

Viser en ellipsis foran en streng er mos bare det samme som ellipse på slutten, bare med ett enkelt triks: For å legge til en ellipse i begynnelsen av en streng, bruk RTL og og text-align for å klippe begynnelsen av strengen! Å spille RTL av text-align er en genial måte å få ønsket effekt av CSS-ellips i begynnelsen av et element eller en streng. Det ville være flott for CSS-spesifikasjonen å implementere et mer robust ellipsisystem, men foreløpig tilber jeg fantastiske CSS-triks som dette!

Write a Comment

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *