Richten Sie den Text nach rechts aus, wobei er nach links überläuft [duplizieren]
Hinweis: Diese Frage wird in der oben verlinkten Frage weder beantwortet noch ist sie ein Duplikat. Diese Frage adressiert das Problem mit der Reihenfolge der Sonderzeichen bei der Verwendung von text-direction: rtl , was sich herausstellt, kann mit unicode-bidi: bidi-override gelöst werden, wie unten in @Serlite gezeigt.
Ich habe ein div, das einen Text enthält, den ich nach links und nicht nach rechts überlaufen möchte.
Wenn das div beispielsweise alle Buchstaben des Alphabets enthält, lautet das Standardverhalten wie folgt:
Ich möchte jedoch, dass der Inhalt des Div wie folgt angezeigt wird:
Die Verwendung von direction: rtl in den Stilen für dieses div funktioniert gut und erreicht diesen Effekt perfekt für das obige Beispiel, sowie wenn der Inhalt nur Zahlen (oder eine Mischung aus alphanumerischen Zeichen) wie unten gezeigt enthält.
Standardverhalten:
Verhalten nach dem Festlegen von direction: rtl :
Das Problem tritt auf, wenn Sonderzeichen in das Div eingegeben werden, z. B. * und #.
Wenn Sie die Zeichenfolge *#0123456789 als div-Inhalt festlegen, wird Folgendes angezeigt:
Beachten Sie, dass * vom Anfang der Zeichenfolge bis zum Ende verschoben wird.
Es ist schwierig, mit nur Bildern, das Problem zu zeigen, so hier eine schnelle jsfiddle ist es besser zu zeigen.
Im Allgemeinen scheint es, als würden beim Festlegen der direction -Eigenschaft seltsame Dinge passieren, und so vermute ich, dass es wahrscheinlich nicht der richtige Weg ist.
Gibt es eine Möglichkeit, die letzten Zeichen immer sichtbar zu machen, während die ersten Zeichen nach links überlaufen?
4 Antworten
Die unerwartete Neuordnung, die Sie beobachten, ist auf einen Algorithmus zurückzuführen, der zum Bestimmen der Reihenfolge von bidirektionalem Text verwendet wird. Ich werde nicht näher darauf eingehen, wie die Reihenfolge genau festgelegt ist, aber grundsätzlich werden Zeichen nach starker, schwacher und neutraler Direktionalität klassifiziert, die dazu verwendet wird, sie in einer Zeichenfolge anzuordnen.
Ihre Zeichenkette "* # 02468" besteht nur aus einer Mischung von Zeichen mit schwacher oder neutraler Direktionalität, was bedeutet, dass ihre Reihenfolge ohne den Kontext eines stark gerichteten Zeichens (wie arabischer Text, der von rechts nach links gelesen wird) unerwartet ist. . Abhängig von den verwendeten Zeichen scheinen sie der angegebenen direction zu widersprechen.
Um dieses Verhalten zu vermeiden, können Sie das unicode-bidi Eigenschaft, um den Algorithmus zu überschreiben und sich streng auf die angegebene Richtung zu verlassen:
Hier ist ein aktualisierter JSFiddle .
Sie können auch ein wenig mehr über die logische Anordnung dieses Algorithmus nachlesen, wenn Sie interessiert sind . Es ist ein bisschen zu komplex, um darüber ins Detail zu gehen.
Hoffe, das hilft! Lass es mich wissen, wenn du Fragen hast.
Hinweis: Wenn die Zeichen in der Zeichenfolge nicht umgekehrt werden sollen, funktioniert dies nicht für Sie. Gehen Sie in diesem Fall mit einem Ansatz vor, der die Eigenschaft direction nicht verwendet - denn genau dafür wurde die Eigenschaft entworfen.