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>

Tags:

Javascript

Html

Css

Text

Bidirectional

Recent Posts