Issue with the direction: rtl CSS property

Question

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?

Urion

Why do you need rtl with a latin language? – Chumash

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 – Midrib

That's a good question. How else would I achieve that, though, without solutions that would imply wrapping every word within HTML elements? – Urion

@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 – Urion

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 – Kapok

Answer 1

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>

Heresy

Thanks for your answer. Unfortunately, this looks very off when you have short paths. See these fiddles: jsfiddle.net/acur94u3 and jsfiddle.net/hptydy6z – Urion

@Urion see my update on first snippet. what looks odd to me is the three dots showing up whatever length of text is involved ;) – Heresy

@Urion might be a way to hide/show visually dots only when needed codepen.io/gc-nomade/pen/JKyjZq – Heresy

Thank you! I tried a solution similar to yours, now I realize i forgot to add display: inline-block to the node with the text. – Urion

Answer 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>

Thermostatics

Amazing! This worked for me. – Billington