Issue with the direction: rtl CSS property
You may use direction on container then reset it 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 just use float if your main issue is which 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>
I looked at the other solutions but I think this is simpler and more effective.
.title-wrapper {
max-width: 200px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl;
}
.title {
unicode-bidi: plaintext;
}
<div class="title-wrapper">
<span class="title">asdasd/qweqwe/xcvxcv/rtyrty/dfgdfgdfgdfgdfgd</span>
</div>