Mehrere Browserkompatibilitätsprobleme mit Text-Überlauf-Ellipsen auf der linken Seite mit RTL

Mein Ziel ist es, ein Element mit verstecktem Überlauf und einer Ellipse zu erstellen, außer dass die Zeichen auf der LINKEN Seite ausgeblendet werden sollen und die Ellipsen auch auf der linken Seite sein sollen. Dies funktioniert für die meisten Browser:

CSS:

HTML:

Was, wenn #mydiv schmaler als sein Inhalt ist, sollte als etwas wie herauskommen:

  

... obar foobar

Aber was ich sagen kann (und eine faire Warnung an alle anderen, die das versuchen, da ich die direction:rtl Lösung an mehreren anderen Orten gesehen habe), scheint der EINZIGE Hauptbrowser, der das richtig macht, Firefox zu sein. Safari und Google Chrome platzieren beide Ellipsen links neben dem Text, schneiden aber trotzdem auf der rechten Seite wie folgt ab:

  

... foobar foob

IE9 und Opera werden regelrecht verwirrt. IE trunkiert auf der rechten Seite UND lässt den Text die Ellipse überlappen. Opera, bei weitem die kreativste, macht den Überlauf für einzelne Wörter für eine Weile sichtbar (wie das Element schmaler wird, das ist), dann beginnen Sie, das Wort ganz links abzuschneiden, aber von rechts. Es macht auch nicht, die Ellipse zu machen, und in einem Experiment, das ich tat, bewegte sich sogar ein? Charakter ganz nach links. Ja wirklich. So "Foobar Foobar Foobar ™" wird dies:

  

™ Foob Foobar

Als eine zusätzliche (äußerst ärgerliche) potentielle Option für Webkit-Browser könnte es sein, -webkit-rtl-ordering:visual zu setzen, die links schneidet, aber die Zeichen auch in umgekehrter Reihenfolge darstellt:

  

... boofraboof

Also könnte man theoretisch durch Browser- oder irgendeine Art von obskurem Feature-Sniffing diese Eigenschaft setzen und den Text des Elements dynamisch umkehren.

Gibt es eine einfache browserübergreifende Problemumgehung oder sogar eine komplexe JS-basierte Lösung?