方向问题：rtl CSS 属性

Question

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

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

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

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

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

到目前为止，我已经尝试过并且它适用于现代浏览器的方法是添加 unicode-bidi: plaintext; CSS 属性，但根据 Mozilla Developer Network，这是实验性的，并且在不那么现代的情况下没有得到很好的支持 cough 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>

如果您的主要问题是文本溢出的方式，则仅使用浮点数

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