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

Question

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

CSS:

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

HTML:

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

, die, wenn #mydiv schmaler als ihr Inhalt ist, sollte wie so etwas kommen:

... obar foobar

Aber von dem, was ich sagen kann (und faire Warnung an alle anderen, die dies versucht, da ich die direction:rtl Lösung an mehreren anderen Orten gesehen habe), scheint der einzige Hauptbrowser, der dies richtig tut, Firefox zu sein. Safari und Google Chrome beide legen die Auslassungspunkte nach links des Textes, aber dann gestutzt auf der rechten wie auch immer, wie folgt aus:

... foobar foob

IE9 und Opera bekommen geradezu 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 sogar eine ™ Zeichen ganz nach links. Ja wirklich. So "foobar foobar foobar ™" wird dies:

™ foob foobar

Als zusätzliche Anmerkung, ein (sehr ärgerlich) mögliche Option für Webkit-Browser möglicherweise -webkit-rtl-ordering:visual einzustellen, der auf der linken Seite kürzt sondern auch macht buchstäblich die Zeichen in umgekehrter Reihenfolge:

... boofraboof

Also durch Browser-oder irgendwie-obskure-Feature-Sniffing könnte man theoretisch diese Eigenschaft festlegen und den Text des Elements dynamisch umkehren.

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

Answer 1

Es gibt JS/Jquery basierte Lösungen für Ihr Problem. Der einzige Nachteil ist, dass sie teurer sind. Wenn Sie auf Ihrer Seite nicht viele Änderungen vornehmen, sollten die folgenden Lösungen gut funktionieren.

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

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

Edit: Nur um klar zu sein, ich die gleichen Probleme zu sehen, die Sie erwähnt haben.