I've read this article http://www.uxrim.com/technical/2013/09/01/showing-the-ellipsis-on-left-side-with-trimming-the-beginning-characters/ but I did not understand the following: if we set the :after with a content that fit the full width of the .ellipsis then how :after will move to let the :before to be shown if the text is wider than it is width? note: I am working on a project that I need a left ellipsis to be shown when the text is wider than it's container and this is the first time I need this and I prefer if there is any pure css solution.
Asked
Active
Viewed 415 times
1
-
I don't believe that you can do this w/o javascript, b/c you are measuring IF the text is overflowed, then show the ellipsis. You can determine if the text has overflown here: http://stackoverflow.com/questions/6406843/detect-if-text-has-overflown and then add a class to tack on the "before" psuedo element. If you find another way I'd love to see the solution. – Rob Scott Jan 21 '15 at 19:00
-
I've posted a link containing pure css solution with my question which to be honest I did not fully understand it .. but you may – Saaid Samer Jan 21 '15 at 19:09
-
That's what I'm saying. He's putting the ellipsis on the left side ALWAYS, not IF it needs it. As you stated: ".....I need a left ellipsis to be shown when the text is wider than it's container....". You cannot determine if it's wider w/o javascript, at least not to my knowledge – Rob Scott Jan 21 '15 at 19:14
-
have you seen this http://stackoverflow.com/questions/9793473/text-overflow-ellipsis-on-left-side and this http://stackoverflow.com/questions/12761418/i-need-an-overflow-to-truncate-from-the-left-with-ellipses ? – web-tiki Jan 21 '15 at 19:33