如何更改负号位置css答案

【问题标题】：how to change negative sign position css如何更改负号位置css
【发布时间】：2015-05-18 10:01:12
【问题描述】：

我有一个网站，它显示了它的两个方向的内容。 rtl & ltr.

当页面处于ltr内容模式时，每个thin都可以，并且负号显示在数字的左侧。

body {
    direction: ltr;
}

例如：-1

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

body {
    direction: rtl;
}

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

例如：1-

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

【问题讨论】：

换行并改变css方向？
同上，span应该可以！
您也可以尝试在数字前加上left-to-right-mark，如回答in this post
没错@skobaljic。它与添加跨度一起工作，然后改变方向并最终将显示更改为内联块。请回答这个问题，直到我标记为答案。谢谢。
你自己做的，你也可以回答，我点赞，干杯。

标签： html css negative-number

【解决方案1】：

将数字包装在span 中并更改方向似乎没有任何效果，如以下小提琴所示：https://jsfiddle.net/shaansingh/kLpa8ygv/。

但是，OP 发现通过添加inline-block 并在跨度中写入-，解决方案有效。只需将它添加到这个答案中，这样它就可以尽可能地足智多谋。详情请查看 cmets 和 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-";
}

完整的代码在这个小提琴中：https://jsfiddle.net/shaansingh/axpevvon/4/

【讨论】：

【解决方案2】：

您可以在 span 中给出数字并将该 span 方向指定给 ltr，例如：

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

css：

.nagativeVal
{
  direction: ltr;
}

希望对你有帮助。

【讨论】：

【解决方案3】：

检查下面的代码！

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

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

【讨论】：

【解决方案4】：

将数字包装在 span 中并添加以下两个 css：

direction: ltr;
display: inline-block;

【讨论】：

为什么ltr不够用？

【解决方案5】：

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

解决方案：

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

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

【讨论】：

【解决方案6】：

这个可以用

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

Refer this mdn link

【讨论】：