cách thay đổi vị trí dấu âm css

Question

Tôi có một trang web hiển thị nội dung của nó theo hai hướng. rtl & ltr.

Khi trang ở chế độ nội dung ltr, mọi thins đều OK và dấu âm hiển thị ở bên trái số.

body { 
    direction: ltr; 
} 

Ví dụ: -1

Nhưng khi trang đang ở chế độ rtl,

body { 
    direction: rtl; 
} 

dấu hiệu tiêu cực của số hàng hiển thị trên bên phải của số.

Ví dụ: 1-

Trong khi tôi muốn thể hiện dấu hiệu tiêu cực trong trái số trong cả hai trường hợp. Làm thế nào để tôi làm điều này? Cảm ơn.

Answer 1

Bó số trong khoảng thời gian và thêm hai sau css với nó:

direction: ltr; 
display: inline-block; 

Answer 2

Bao gói các số trong một span và thay đổi hướng dường như không có bất kỳ ảnh hưởng nào, như được hiển thị trong fiddle này: https://jsfiddle.net/shaansingh/kLpa8ygv/.

Tuy nhiên, OP thấy rằng bằng cách thêm inline-block và viết - trong phạm vi, giải pháp đã hoạt động. Chỉ cần thêm nó vào câu trả lời này để nó có thể được tháo vát hết mức có thể. Vui lòng kiểm tra ý kiến ​​và câu trả lời của OP để biết chi tiết đầy đủ.

direction: ltr; 
display: inline-block; 

Bạn luôn có thể sử dụng JavaScript để khắc phục sự cố. Sử dụng kịch bản này để phát hiện xem cơ thể là rtl và thay đổi cho phù hợp (giả sử lít là mặc định trong HTML):

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

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

Mã đầy đủ là trong fiddle này: https://jsfiddle.net/shaansingh/axpevvon/4/

Answer 3

Bạn có thể cung cấp số lượng trong khoảng thời gian và cho rằng hướng span để LTR như:

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

css:

.nagativeVal 
{ 
    direction: ltr; 
} 

Hy vọng điều đó sẽ hữu ích.

Answer 4

Kiểm tra mã bên dưới!

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

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