Question

我有一个div，它的方向取决于它所托管的内容（使用dir="auto"）。我想使用CSS（如果它不可能比javascript）来确定方向并相应地改变删除范围的绝对位置。

在这个小提琴中看到：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"为浏览器提供了根据元素内容检测使用方向的所有权。

请注意different browsers might give different results，基于实施。

dir=auto实际tells the browser to：

查看元素中第一个强类型字符，并从中得出元素的基本方向。如果它是希伯来语（或阿拉伯语等）字符，则该元素将获得rtl的方向。如果它是拉丁字符，那么方向将是ltr。

在CSS中，你真的没有选项来检查这个，但是如果你想使用javascript，你可以尝试做同样的事情。找到强类型的第一个字符，并根据该字符使用相关方向。你在这里遇到的唯一问题是你想支持哪种语言。

Answer 2

我找到了一个解决方案但距离你的代码很远。它基于display: table，因为我们需要为每个元素提供动态方向流。不要忘记，您可以更改不同位置的垂直对齐。

.item {
  display: table;
  width: 200px;
  height: 50px;
}

.item .btn,
.item .content {
  display: table-cell;
}

.item .btn {
  vertical-align: top;
}

.item .content {
  width: 100%;
  vertical-align: bottom;
}

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

Fiddle demo

Answer 3

如果将容器的显示更改为flex，则可以轻松实现。你只需要对齐内容：space-between：

CSS比你所拥有的更紧凑：

.item {
  position: relative;
  display: flex;
  width: 200px;
  justify-content: space-between;
}

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

检测div的当前方向

3 个答案: