direction：rtl CSSプロパティの問題

Question

私はHTML要素を持っており、その中にフォルダ/ファイルパスを表示する必要があります。

また、1行（幅の狭いコンテナ内）に保持したいので、私は明らかに省略記号を追加する必要があります。

もう1つの要件は、そのパスに最も深いフォルダノードが常に表示されるようにすることです（最新のノードが実際に興味を持っているため、パスが長い場合に役立ちます）。

/などの文字を動かすために、direction: rtl; CSSプロパティを使用すると、これは達成するのが非常に難しいです。

この例を見てみましょう：https://jsfiddle.net/r897duu9/1/（あなたが見ることができるように、私はdirection: rtlプロパティをオーバーライドし、何らかの理由で、この意志としてtext-overflow: ellipsisプロパティを使用しませんでした）。

私がこれまで試した、それは近代的なブラウザで動作しますが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>

またはちょうどあなたの主な問題は、テキストが、あなたがラテン語でrtl` `必要な理由

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