How can I align text to the right in a div so its beginning is cut down with overflow:hidden?

<div style="width:100px; overflow:hidden; text-align:right;" id="pathdiv">

<script>
    document.getElementById("pathdiv").innerHTML="long/path/to/file"
</script>

My goal is to show a long absolute path right aligned in a relatively narrow div, in a way that its beginning is cut down ( so that the interesting part of the path is shown ). The above code makes the text right aligned if it fits in the div, cuts it if it does not fit, but unfortunately it cuts the end of it, not the beginning.

I could trim the string if it is too long manually, but then I have to calculate somehow how many characters make it fit ( unclear ).

Is their any straightforward way to achieve my goal ( either with CSS or otherwise )?

Solution

<div style="width:100px; overflow:hidden; text-align:right;text-overflow:ellipsis; direction:rtl" id="pathdiv">

<script>
    document.getElementById("pathdiv").innerHTML="long/path/to/file"
</script>

Adding direction(rtl) would work.