javascript-方向问题：rtl CSS属性

我有一个HTML元素,我需要在其中显示一个文件夹/文件路径,有时可能会很长.

我还希望将其放在一行中(在宽度受限制的容器内),因此显然我需要在其上添加省略号.

另一个要求是,我应该始终看到该路径中最深的文件夹节点(当路径较​​长时,这很有用,因为最新的节点才是您真正感兴趣的).

问题是,如果我使用以下方向,这将很难实现：rtl; CSS属性,因为它将移动其他字符,例如/甚至是括号.

看一下这个示例：https://jsfiddle.net/r897duu9/1/(如您所见,我没有使用text-overflow：省略号属性,因为由于某种原因,它将覆盖direction：rtl属性).

到目前为止,我已经尝试过并且可以在现代浏览器上使用的功能是添加unicode-bidi：plaintext; CSS属性,但是根据Mozilla Developer Network,这是实验性的,在不太现代的咳嗽IE浏览器中没有很好的支持.这里的小提琴是：https://jsfiddle.net/n05b3jgt/1/.

有谁知道一种更好的方法来实现这一点,并且将在各种浏览器中得到很好的支持？

解决方法:

您可以在容器上使用方向,然后在文本上重置它.

.container {
  width: 340px;
  background:gray;
  direction:rtl;
  overflow:hidden;
  text-align:left;
  position:relative;
}
.container:before{
  position: absolute;
  content: '...';
  background: white;
  left: 0;
}

.text-with-path {
  display:inline-block;
  white-space:nowrap;  
  text-indent:1em;
  direction:ltr;

<div class="container">
  <div class="text-with-path">
    /Root/someFolder/SomeAnotherFolder/AgainSomeotherFolder/MyPictures/MyDocs (recent)
  </div>
</div>
<hr/>
<div class="container">
  <div class="text-with-path">
   /MyPictures/MyDocs (recent)
  </div>
</div>

或者如果您的主要问题是文本溢出的方式,则只使用float

.container {
  width: 340px;
  background:gray;
  overflow:hidden;
  position:relative;
}
.container:before{
  position: absolute;
  background:gray;
  content: '...';
  left: 0;
}

.text-with-path {
  float:right;
  margin-left:-999px;
  }

<div class="container">
  <div class="text-with-path">
    /Root/someFolder/SomeAnotherFolder/AgainSomeotherFolder/MyPictures/MyDocs (recent)
  </div>
</div>

标签：text,bidirectional,css,html,javascript
来源： https://codeday.me/bug/20191118/2028228.html