方向问题：rtl CSS 属性

Question

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

我还想将它保留在一行上（在宽度受限的容器内），所以我显然需要向它添加一些省略号。

另一个要求是我应该始终看到该路径中最深的文件夹节点（当路径很长时这很有用，因为最新的节点是您真正感兴趣的）。

问题是，如果我要使用direction: rtl;CSS 属性，这很难实现，因为它会移动其他字符，例如/甚至是括号。

看看这个例子：https : //jsfiddle.net/r897duu9/1/（如你所见，我没有使用该text-overflow: ellipsis属性，因为出于某种原因，这会覆盖该direction: rtl属性）。

到目前为止，我已经尝试过并且它在现代浏览器上工作的是添加unicode-bidi: plaintext;CSS 属性，但根据Mozilla 开发者网络，这是实验性的，在不太现代的咳嗽IE 浏览器中没有得到很好的支持。小提琴在这里：https : //jsfiddle.net/n05b3jgt/1/。

有没有人知道实现这一目标的更好方法，这将在各种浏览器中得到很好的支持？

Answer 1

我查看了其他解决方案，但我认为这更简单、更有效。

.title-wrapper {
  max-width: 200px;
  
  text-align: left;
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  direction: rtl;
}

.title {
  unicode-bidi: plaintext;
}

  <div class="title-wrapper">
    <span class="title">asdasd/qweqwe/xcvxcv/rtyrty/dfgdfgdfgdfgdfgd</span>
  </div>

Answer 2

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

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