方向问题：rtl CSS 属性

Question

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

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

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

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

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

到目前为止我已经尝试并在现代浏览器上运行的是添加 unicode-bidi: plaintext; CSS 属性，但是根据 Mozilla Developer Network this is experimental and not well supported across not-so-modern cough IE browsers. The fiddle for this is here: https://jsfiddle.net/n05b3jgt/1/ .

有谁知道实现此目的的更好方法，该方法将在各种浏览器中得到很好的支持？

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

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

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

Answer 2

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

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

方向问题：rtl CSS 属性

Issue with the direction: rtl CSS property

html

javascript

css

text

bidirectional