Question

我有一个网站，它向两个方向显示其内容。 rtl＆amp; LTR。

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

body {
    direction: ltr;
}

例如：-1

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

body {
    direction: rtl;
}

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

例如：1 -

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

Answer 1

将数字换成span并在其中添加两个css：

direction: ltr;
display: inline-block;

Answer 2

检查以下代码！

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

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

Answer 3

将span中的数字包裹起来并改变方向似乎没有任何效果，如此小提琴所示：https://jsfiddle.net/shaansingh/kLpa8ygv/。

然而，OP发现通过添加inline-block并在范围内编写-，解决方案可行。只需将其添加到此答案中，即可尽可能地提供足够的资源。请查看评论和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/

Answer 4

您可以给出跨度数，并将该跨度方向赋予ltr，如：

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

<强>的CSS：

.nagativeVal
{
  direction: ltr;
}

希望它有所帮助。

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

6 个答案: