Issue with the direction: rtl CSS property
<p>I have an HTML element and I need to display a folder / file path within it that can sometimes be very long. </p>

<p>I also want to keep it on a single line (within a width constrained container) so I obviously need to add some ellipsis to it.</p>

<p>Another requirement is that I should always see the deepest folder nodes in that path (this is helpful when the path is long, because the latest nodes is what you're actually interested in).</p>

<p>The problem is, this is quite hard to achieve if I'm to use the <code>direction: rtl;</code> CSS property, because it will move other characters around, such as <code>/</code> or even paranthesis. </p>

<p>Take a look at this example: <a href="https://jsfiddle.net/r897duu9/1/" rel="noreferrer">https://jsfiddle.net/r897duu9/1/</a> (as you can see, I didn't use the <code>text-overflow: ellipsis</code> property as this will, for some reason, override the <code>direction: rtl</code> property).</p>

<p>What I've tried so far and it works on modern browsers is adding the <code>unicode-bidi: plaintext;</code> CSS property, but according to the <a href="https://developer.mozilla.org/en/docs/Web/CSS/unicode-bidi" rel="noreferrer">Mozilla Developer Network</a> this is experimental and not well supported across not-so-modern <em>cough</em> IE browsers. The fiddle for this is here: <a href="https://jsfiddle.net/n05b3jgt/1/" rel="noreferrer">https://jsfiddle.net/n05b3jgt/1/</a> .</p>

<p>Does anyone know a better way to achieve this, that would be well supported across a wide range of browsers?</p>