發佈方向：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>