CSS Ellipsis Beginning of String
I was incredibly happy when CSS text-overflow: ellipsis (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 ellipsis was also very friendly to accessibility.
The CSS 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!
The CSS
Showing an ellipsis at the front of a string is mostly the same as ellipsis at the end, only with one simple trick:
.ellipsize-left {
/* Standard CSS ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
/* Beginning of string */
direction: rtl;
text-align: left;
}
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!
![From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!]()
My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...
![Responsive and Infinitely Scalable JS Animations]()
Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...
![Chris Coyier’s Favorite CodePen Demos]()
David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...
![Styling CSS Print Page Breaks]()
It's important to construct your websites in a fashion that lends well to print. I use a page-break CSS class on my websites to tell the browser to insert a page break at strategic points on the page. During the development of my...
The CSS spec seems to recommend against using the
directionproperty on web pages:https://drafts.csswg.org/css-writing-modes-3/#direction
Happy to have helped!
https://stackoverflow.com/questions/9793473/text-overflow-ellipsis-on-left-side/9793669#9793669
http://jsfiddle.net/yak613/fhr2s10c/
This seems kind of strange. Where is the extra slash coming from?
This trick seems to be broken for Safari which still truncates from the back then appends the ellipsis to the front.
Chrome/FF: 12345 => …345
Safari: 12345 => …123
For anyone having issues with symbols, like the plus sign in international phone numbers, add this:
unicode-bidi: plaintext;
If anyone dealing with multiline strings to truncate i recommend using the cuttr.js (https://github.com/d-e-v-s-k/cuttr-js) library ;)
Just in case anyone else runs into this… I had an issue where if the text contained punctuation, adding
moved the punctuation marks to the beginning of the text. I solved this by appending the unicode character to the end of the string with an :after
.ellipsize-left { /* Standard CSS ellipsis */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 200px; /* Beginning of string */ direction: rtl; text-align: left; } .ellipsize-left:after { content: '\200E' }