Question

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

这是我的代码 -

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 1

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

Answer 2

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

abc

显示

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

当您输入 a ， b ，最后 c <时，您所描述的行为就会发生/ strong>即可。如果您输入RTL字符，例如 #x0627;بة - 您会看到 ا ب ة 从右到左显示。请注意，如果您未指定rtl方向，这也将起作用。此外，无论你如何选择方向，斜线都会出现在左侧。

如果您将unicode-bidi标记添加到CSS中，则可以获得有趣的效果。

CSS中方向属性的奇怪行为

2 个答案: