2015-03-16 13 views
6

Ich habe eine Web site, die seinen Inhalt es zwei Richtung zeigt. rtl & ltr.wie man negative Zeichenposition ändert css

Wenn sich die Seite im Ltr-Inhaltsmodus befindet, ist jeder Wert OK und das negative Zeichen wird links von der Zahl angezeigt.

body { 
    direction: ltr; 
} 

Zum Beispiel: -1

Aber wenn Seite ist in rtl Modus

body { 
    direction: rtl; 
} 

das negative Vorzeichen der Zahlen zeigt in der rechten Reihe.

Zum Beispiel: 1-

Während ich negatives Vorzeichen in den linken der Zahl in beiden Fällen angezeigt werden soll. Wie mache ich das? Danke.

+5

Wrap Zahlen und Änderung CSS Richtung? – skobaljic

+1

wie oben, sollte eine Spanne tun! –

+0

Sie können auch versuchen, Zahlen mit [left-to-right-mark] voranzulegen (http://www.fileformat.info/info/unicode/char/200e/index.htm), wie beantwortet [in diesem Post] (http: // Stapelüberlauf.com/questions/8227183/rtl-is-on-web-seiten-reverses-zahlen-mit-einem-strich # 19930251) – skobaljic

Antwort

5

Wickeln Sie die Zahl in Spannweite und zwei bis es folgende CSS:

direction: ltr; 
display: inline-block; 
+1

Warum ltr nicht genug ist? –

1

Einpacken der Zahlen in einem span und Ändern der Richtung schien keine Wirkung zu haben, wie in dieser Geige gezeigt: https://jsfiddle.net/shaansingh/kLpa8ygv/.

Die OP fand jedoch, dass durch Hinzufügen inline-block und Schreiben der in der Spanne, die Lösung funktionierte. Fügen Sie es einfach dieser Antwort hinzu, damit es so einfallsreich wie möglich sein kann. Bitte lesen Sie die Kommentare und die Antwort von OP für weitere Details.

Sie könnten immer auf ein wenig JavaScript zurückgreifen, um das Problem zu beheben. Verwenden Sie dieses Skript zu erkennen, ob Körper rtl ist und entsprechend ändern (vorausgesetzt ltr ist die standardmäßig im HTML):

var element = document.body, 
    style = window.getComputedStyle(element), 
    direction = style.getPropertyValue('direction'); 

if (direction == "rtl") { 
    document.getElementById("neg").innerHTML = "1-"; 
} 

Der vollständige Code ist in dieser Geige: https://jsfiddle.net/shaansingh/axpevvon/4/

0

Sie können Nummer in Spanne geben und geben, die Spannweitenrichtung auf lTR wie:

<span class="nagativeVal">-1</span> 

CSS:

.nagativeVal 
{ 
    direction: ltr; 
} 

Ich hoffe, es hilft.

3

Überprüfen Sie den folgenden Code!

BODY { 
 
    direction: rtl; 
 
} 
 
#test { 
 
    direction: ltr; 
 
    text-align: right 
 
}
Sample Text abc <br /> 
 
    -1 
 
    <p id="test">-1 </p>

Verwandte Themen