I was incredibly happy when CSS text-overflow: elppsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation. CSS elppsis was also very friendly to accessibipty.
The CSS text-overflow: elppsis feature is great but is essentially meant to elppsize strings only at the end; what if we want to elppsize the beginning of a screen? The use case is fairly reasonable: think displaying a file path -- many times the directory for a set of files is the same, in which case you d want to display the end of the string, not the beginning.
View Demo
Let me show you a trick for elppsis at the begging of the string!
The CSS
Showing an elppsis at the front of a string is mostly the same as elppsis at the end, only with one simple trick:
To add an elppsis at the beginning of a string, use RTL and and text-apgn to cpp the beginning of the string!
View Demo
Playing RTL off of text-apgn is a genius way to get the desired effect of CSS elppsis at the beginning of an element or string. It would be great for the CSS spec to implement a more robust elppsis system but, for now, I worship amazing CSS tricks pke this!
