jak zmienić pozycję znaku negatywnego css

Question

Mam stronę internetową, która pokazuje jej zawartość w dwóch kierunkach. rtl & ltr.

Gdy strona jest w trybie zawartości ltr, każdy znak jest w porządku, a znak ujemny jest wyświetlany po lewej stronie numeru.

body { 
    direction: ltr; 
} 

Na przykład: -1

Ale gdy strona jest w trybie RTL

body { 
    direction: rtl; 
} 

ujemny znak liczb pokazuje w prawo od numeru.

Na przykład: 1-

Podczas gdy chcę pokazać ujemny znak w lewo od liczby w obu przypadkach. Jak mam to zrobic? Dzięki.

Answer 1

Wrap liczba w przedziale i dodać dwa następujące CSS go:

direction: ltr; 
display: inline-block; 

Answer 2

Owijanie liczb w span i zmiana kierunku nie wydają się mieć żadnego wpływu, jak pokazano w tym skrzypcach: https://jsfiddle.net/shaansingh/kLpa8ygv/.

Jednak OP stwierdził, że poprzez dodanie inline-block i zapisanie - w przęśle, rozwiązanie zadziałało. Wystarczy dodać ją do tej odpowiedzi, aby była jak najbardziej zaradna. Proszę sprawdzić komentarze i odpowiedź OP w celu uzyskania pełnych informacji.

direction: ltr; 
display: inline-block; 

Zawsze można uciec się do trochę JavaScript, aby rozwiązać problem. Użyć tego skryptu, aby wykryć, czy ciało jest RTL i zmienić odpowiednio (przy założeniu ltr jest domyślnym w HTML):

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

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

pełny kod jest w tym skrzypce: https://jsfiddle.net/shaansingh/axpevvon/4/

Answer 3

Można podać numer w rozpiętości i dać, że kierunek Span LTR jak:

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

CSS

.nagativeVal 
{ 
    direction: ltr; 
} 

Mam nadzieję, że to pomaga.

Answer 4

Sprawdź poniższy kod!

BODY { 
 
    direction: rtl; 
 
} 
 
#test { 
 
    direction: ltr; 
 
    text-align: right 
 
}

Sample Text abc <br /> 
 
    -1 
 
    <p id="test">-1 </p>