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?

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. https://jsfiddle.net/n05b3jgt/2/ — CBroe, Jul 06 '16 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, Jul 06 '16 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: https://jsfiddle.net/Lr2pen09/ — Zubzob, Jul 06 '16 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, Jul 06 '16 at 11:55

score 8 · Answer 1 · answered Feb 14 '20 at 08:57

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>

G-Cyrillus · Accepted Answer · 2016-07-06T11:41:51.033

5

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>

edited Jul 06 '16 at 11:41

answered Jul 06 '16 at 11:31

G-Cyrillus

101,410
14
105
129

Thanks for your answer. Unfortunately, this looks very off when you have short paths. See these fiddles: https://jsfiddle.net/acur94u3/ and https://jsfiddle.net/hptydy6z/ – Zubzob Jul 06 '16 at 11:34
1

@Zubzob see my update on first snippet. what looks odd to me is the three dots showing up whatever length of text is involved ;) – G-Cyrillus Jul 06 '16 at 11:42
1

@Zubzob might be a way to hide/show visually dots only when needed http://codepen.io/gc-nomade/pen/JKyjZq – G-Cyrillus Jul 06 '16 at 11:49
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. – Zubzob Jul 06 '16 at 12:38

Issue with the direction: rtl CSS property

2 Answers2