javascript - 检测div的当前方向

Question

我有一个 div，它的方向由它承载的内容决定(使用 dir="auto")。我想使用 CSS(如果它比 javascript 不可能)来确定方向并相应地更改删除跨度的绝对位置。

请参阅此 fiddle :https://jsfiddle.net/psjgsnby/

<div dir="auto" class="item">
  text
  <span>x</span>
</div>
<div dir="auto" class="item">
  מימין לשמאל
  <span>x</span>
</div>

CSS:

.item {
  position: relative;
  width: 200px;
}
.item span {
  position: absolute;
  right: 0;
  top: 0;
}

我正在寻找类似 this selector 的内容:

.item span:dir(rtl) {
  right: auto;
  left: 0;
}

但是可以跨浏览器使用的东西(上面的只适用于 firefox)

Answer 1

使用 dir="auto" 可以让浏览器根据元素的内容检测使用哪个方向。

Note that different browsers might give different results, based on implementation.

dir=auto 实际上是tells the browser to :

look at the first strongly typed character in the element and work out from that what the base direction of the element should be. If it's a Hebrew (or Arabic, etc.) character, the element will get a direction of rtl. If it's, say, a Latin character, the direction will be ltr.

在 CSS 中，您实际上没有检查此项的选项，但如果您想使用 javascript，您可以尝试做完全相同的事情。找到第一个强类型字符，并基于该字符使用相关方向。您在这里遇到的唯一问题是您希望支持哪些语言。