javascript - 方向问题 : rtl CSS property

Question

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

我还想将它保留在一行中(在宽度受限的容器内)，因此我显然需要向其添加一些省略号。

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

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

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

到目前为止，我已经尝试并在现代浏览器上运行的方法是添加 unicode-bidi: plaintext; CSS 属性，但根据 Mozilla Developer Network这是实验性的，在不太现代的 咳咳 IE 浏览器中没有得到很好的支持。 fiddle 在这里: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>