Several browser compatibility problems with text-overflow ellipsis on left-hand side using RTL

Question

My goal is to create an element with hidden overflow and an ellipsis, except I want the characters on the LEFT side to be hidden and the ellipsis also to be on the left. This works for most browsers:

CSS:

#mydiv {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    direction:rtl;
}

HTML:

<div id="mydiv">foobar foobar foobar</div>

Which, when #mydiv is narrower than its contents, should come out as something like:

...obar foobar

However, from what I can tell (and fair warning to anyone else who tries this, since I've seen the direction:rtl solution in several other places), the ONLY major browser that does this correctly seems to be Firefox. Safari and Google Chrome will both place the ellipsis to the left of the text, but then truncate on the right anyway, like this:

...foobar foob

IE9 and Opera get downright confused. IE truncates on the right AND makes the text overlap the ellipsis. Opera, by far the most creative, will make the overflow visible on individual words for a while (as the element gets narrower, that is), then start truncating the leftmost word, but from the right. It also fails to render the ellipsis and, in one experiment I did, even moved a ™ character all the way to the left. Really. So "foobar foobar foobar™" becomes this:

™foob foobar

As an additional note, one (extremely annoying) potential option for webkit browsers might be to set -webkit-rtl-ordering:visual which truncates on the left BUT also literally renders the characters in reverse order:

...boofraboof

So by browser- or some-kind-of-obscure-feature-sniffing one could theoretically set that property and reverse the element's text dynamically.

Is there a simple cross-browser workaround, or even a complex, JS-based one?

Answer 1

There are JS/Jquery based solutions to your problem. The one caveat is they are more expensive. If you are not making a bunch of changes on your page then the following solutions should work just fine.

Dotdotdot: http://dotdotdot.frebsite.nl/

ThreeDots http://tpgblog.com/2009/12/21/threedots-the-jquery-ellipsis-plugin/

Edit: Just to be clear, I'm seeing the same problems that you have mentioned.