javascript - Issue with the direction: rtl CSS property -

i have html element , need display folder / file path within can long.

i want keep on single line (within width constrained container) need add ellipsis it.

another requirement should see deepest folder nodes in path (this helpful when path long, because latest nodes you're interested in).

the problem is, quite hard achieve if i'm use direction: rtl; css property, because move other characters around, such / or paranthesis.

take @ example: https://jsfiddle.net/r897duu9/1/ (as can see, didn't use text-overflow: ellipsis property will, reason, override direction: rtl property).

what i've tried far , works on modern browsers adding unicode-bidi: plaintext; css property, according mozilla developer network experimental , not supported across not-so-modern cough ie browsers. fiddle here: https://jsfiddle.net/n05b3jgt/1/ .

does know better way achieve this, supported across wide range of browsers?

you may use direction on container reset on text.

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

or use float if main issue way text overflows

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