通过 LTR 和 RTL 内容的组合改变负数的方向

Change direction of negative number with combination of LTR and RTL content

提问人：Martin AJ 提问时间：8/13/2016 最后编辑：Martin AJ 更新时间：9/26/2018 访问量：2688

问：

这是我的 HTML 结构：

div{
  direction: rtl;
}

span{
  direction: ltr;
}
<div>
  <span>امروز -2</span>
  </div>

这是预期结果：

enter image description here

如您所见，符号应该出现在数字的开头。我该怎么做？-

注意：的方向应为 。divrtl

ٍ编辑：我像这样生成该数字：

$sums_value = sprintf("%+d",$sums_value);

/* 
sums_value = -2 //=> -2
sums_value = 2  //=> +2

所以数字的格式正确，但我不知道为什么它会在输出中被破坏：

enter image description here

HTML CSS 双向

评论

0赞 Carcigenicate 8/13/2016
它可能被视为一个项目，因此它不会反转它。只需在标记中正常写下数字即可。-2
0赞 DBS 8/13/2016
我知道这可能是显而易见的，但是你没有理由简单地用 ltr 格式编写它吗？（是动态内容吗？
0赞 Martin AJ 8/13/2016
@Carcigenicate 该数字在标记中正常书写。如您所见，它位于检查元素框中。但我不知道为什么它会在网站上反转，比如......-55-
0赞 Martin AJ 8/13/2016
@DBS是的，它是一个动态内容。

答：

3赞 randominstanceOfLivingThing 8/13/2016 #1

您可以使用 before 伪元素添加连字符。

q::before { 
  content: "-";
  color: blue;
}


<q>Some quotes</q>, he said.

将呈现为

-Some quotes, he said.
13赞 Dekel 8/13/2016 #2

由于您的屏幕截图在不同的元素中具有“-2”，因此您可以在该特定范围内进行以下选项：spanunicode-bidi

div{
  direction: rtl;
}

span{
  direction: ltr;
  unicode-bidi: bidi-override;
}
<div>
  امروز 
  <span>-2</span>
</div>

一般的想法是能够更改文本方向性的默认行为，其中在同一页面上有多种语言。unicode-bidi

由于您使用的是语言，并且希望 出现在 中，因此非常方便。RTL-2LTRunicode-bidi: bidi-override

评论

0赞 Martin AJ 8/13/2016
非常好。。点赞 ...你知道，我从来没有见过这么远.玩得好..！unicode-bidi
8赞 Marcus 9/26/2018 #3

以下内容对我有用：

span {
  unicode-bidi: plaintext;
}

更多的信息： https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi

顺便说一句，“bidi”是双向的缩写。

评论

0赞 Marcus 7/6/2019
@A.J. 关于它在 Safari 中不起作用的好点;我没有注意到这一点。

上一个：如何在Laravel中将公共文件夹设为root？

下一个：如何检测特定元素是否被点击？