CSS Ellipsis Beginning of StringI was incredibly happy when CSS
text-overflow: ellipsis (married with fixed
text-overflow: ellipsis feature is great but is essentially meant to ellipsize strings only at the end; what if we want to ellipsize 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.
Let me show you a trick for ellipsis at the begging of the string!
Showing an ellipsis at the front of a string is mostly the same as ellipsis at the end, only with one simple trick:
/* Standard CSS ellipsis */
/* Beginning of string */
To add an ellipsis at the beginning of a string, use RTL and and
text-align to clip the beginning of the string!
Playing RTL off of
text-align is a genius way to get the desired effect of CSS ellipsis at the beginning of an element or string. It would be great for the CSS spec to implement a more robust ellipsis system but, for now, I worship amazing CSS tricks like this!
This is the hardest thing I've ever had to write, much less admit to myself. I've written resignation letters from jobs I've loved, I've ended relationships, I've failed at a host of tasks, and let myself down in my life. All of those feelings were very...
I was recently driven to create a MooTools plugin that would take an element and fade it to a min from a max for a given number of times. Here's the result of my Moo-foolery.
Options of the class include:
min: (defaults to .5) the...
As more devices emerge and differences in device interaction are implemented, the more important good CSS code will become. In order to write good CSS, we need some indicator about device capabilities. We've used CSS media queries thus far, with checks for max-width and pixel ratios.