Question

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

我也希望将它保存在一行（在宽度约束容器内），所以我显然需要添加一些省略号。

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

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

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

到目前为止我尝试过并且在现代浏览器上运行的是添加unicode-bidi: plaintext; CSS属性，但根据Mozilla Developer Network这是实验性的，并且在不那么现代的情况下得不到很好的支持< em> cough IE浏览器。这方面的小提琴是：https://jsfiddle.net/n05b3jgt/1/。

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

或者如果您的主要问题是文本溢出的方式

，则使用float

＆＃13;

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

＆＃13;

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

＆＃13;

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属性

2 个答案: