CSS中方向属性的奇怪行为答案

【问题标题】：Weird behaviour of direction property in CSSCSS中方向属性的奇怪行为
【发布时间】：2018-05-22 18:09:30
【问题描述】：

当我遇到这种奇怪的行为时，我只是在 启用自动保存模式的 Codepen 上玩 CSS，

这是我的代码-

var inner_div = document.querySelector('.inner-div');
var width = inner_div.offsetWidth;
if(width > 200)
  {
    inner_div.style.fontSize = '20px';
  }

.outer-div {
    display: flex;
    height: 3.5em;
    width: 10%;
    border: 2px solid #000000a3;
    margin-left: 200px;
    align-items: center;
    border: 1px solid green;
    direction: rtl;
    white-space: nowrap;
    overflow-x: auto;
}
.inner-div {
    font-size: 40px;
}

<html>
<head>
</head>
<body>
  <div class = "outer-div">
    <div class = "inner-div">
       Hello World
    </div>
  </div>
</body>
</html>

由于我的自动保存模式已启用，我在每次按键时检查文本是否从右到左附加，但 当我按下斜杠 (/) 或任何算术运算符时(+, -, *)，然后这些首先附加在左侧，然后如果下一个按键是字母数字，则它会自动将其附加到表达式的右侧。 例如，如果我输入 c，然后是 b，然后是 a，那么它会显示为 'abc'（根据 direction: rtl 属性的需要），但是如果我然后输入斜杠（/），那么显示是 / abc，然后如果我输入任何字母数字字符，比如 d，它就会显示 abc/d。有人可以解释我这样做的原因。谢谢。

【问题讨论】：

阅读更多关于 rtl 方向的信息，你就会明白。

标签： javascript css right-to-left direction

【解决方案1】：

我认为 Slash 有 BiDi（双向）类。同样的事情！和其他特殊字符。它在周围文本的上下文中应用方向

【讨论】：

【解决方案2】：

我无法重现您描述的行为。 direction 标签本身不会改变方式

abc

显示。您没有输入 c，然后输入 b 和 a。

当您输入 a、b，最后输入 c 时，就会发生您描述的行为。如果您键入 RTL 字符，例如#x0627;&#x0628;&#x0629; - 你会看到 ا ب ة 从右到左出现。请注意，如果您不指定 rtl 方向，这也会起作用。此外，无论您如何选择方向，斜线都会出现在左侧。

如果您将unicode-bidi 标签添加到您的CSS，您可以实现有趣的效果。

【讨论】：