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?