如何更改负号位置 css

Question

我有一个网站，可以从两个方向显示其内容。右图和左图

当页面处于ltr内容模式时，每条细线都可以，负号显示在数字的左边。

body {
    direction: ltr;
}

For example: -1

但是当页面处于 rtl 模式时，

body {
    direction: rtl;
}

数字的负号显示在数字的右边。

For example: 1-

而我想在两种情况下都在数字左侧显示负号。我该怎么做呢？谢谢。

Answer 1

将数字包裹在 span 中并改变方向似乎没有任何效果，如此 fiddle 所示：https://jsfiddle.net/shaansingh/kLpa8ygv/.

但是，OP 发现通过添加 inline-block 并在 span 中写入 -，解决方案有效。只需将它添加到这个答案中，这样它就可以尽可能地足智多谋。请查看评论和 OP 的回答以获取完整详细信息。

direction: ltr;
display: inline-block;

您总是可以采取一些措施 JavaScript 来解决问题。使用此脚本检测 body 是否为 rtl 并相应更改（假设 ltr 是 HTML 中的默认值）：

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

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

完整代码在此fiddle：https://jsfiddle.net/shaansingh/axpevvon/4/

Answer 2

您可以在跨度中给出数字并将跨度方向赋予 ltr，例如：

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

css:

.nagativeVal
{
  direction: ltr;
}

希望对您有所帮助。

Answer 3

检查下面的代码！

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

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

Answer 4

将数字包裹在 span 中并添加两个 css 到它：

direction: ltr;
display: inline-block;

Answer 5

我们在我们的网站上也支持这两个方向，并且有很多数字。我发现这更干净，因为有些情况我们不想更改：display: inline-block; 属性

解决方案：

div {
    direction: ltr;
    unicode-bidi: bidi-override;
}

https://www.w3schools.com/cssref/pr_text_unicode-bidi.asp 有关属性和选项的更多信息

Answer 6

这个可以用

body {
  direction: rtl;
  unicode-bidi: plaintext;
}

Refer this mdn link

如何更改负号位置 css

how to change negative sign position css

html

css

negative-number