I have an HTML element and I need to display a folder / file path within it that can sometimes be very long.

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.

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

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

Take a look at this example: / (as you can see, I didn't use the text-overflow: ellipsis property as this will, for some reason, override the direction: rtl property).

What I've tried so far and it works on modern browsers is adding the unicode-bidi: plaintext; CSS property, but according to the Mozilla Developer Network this is experimental and not well supported across not-so-modern cough IE browsers. The fiddle for this is here: / .

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

I have an HTML element and I need to display a folder / file path within it that can sometimes be very long.

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.

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

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

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

What I've tried so far and it works on modern browsers is adding the unicode-bidi: plaintext; CSS property, but according to the Mozilla Developer Network this is experimental and not well supported across not-so-modern cough IE browsers. The fiddle for this is here: https://jsfiddle.net/n05b3jgt/1/ .

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

• javascript
• html
• css
• text
• bidirectional

• Why do you need rtl with a latin language? – Marcos Pérez Gude Commented Jul 6, 2016 at 11:22
• So the result in the second fiddle is what you’re after? I’d probably position the text absolutely as well, without any direction/bidi stuff. jsfiddle.net/n05b3jgt/2 – C3roe Commented Jul 6, 2016 at 11:27
• That's a good question. How else would I achieve that, though, without solutions that would imply wrapping every word within HTML elements? – Zubzob Commented Jul 6, 2016 at 11:29
• @CBroe: Yeah, i'm looking for something like the second fiddle. Your fiddle is a good idea, but it would look weird when i have paths that are short: jsfiddle.net/Lr2pen09 – Zubzob Commented Jul 6, 2016 at 11:31
• Maybe you could use some javascript here to get the max length a row text can be, split on the slashes and build the path back up until the path exceeds the max length and add an ellipsis (with its length taken into account in the row length calculation). I'd add an answer to this effect but I don't have time at the moment. I think this is the kind of appearance you were after – Jonathan Commented Jul 6, 2016 at 11:55

2 Answers 2

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>

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>