发布方向：rtl CSS属性

Question

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

我也想把它保留在一行（宽度约束的容器内），所以我显然需要添加一些省略号。

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

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

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

我到目前为止已经试过和它的作品在现代浏览器中添加unicode-bidi: plaintext; CSS属性，但根据Mozilla Developer Network这是实验和跨越不那么现代咳嗽 IE浏览器不能很好的支持。这里的小提琴在这里：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>