0
<div style="width:100px; overflow:hidden; text-align:right;" id="pathdiv">

<script>
    document.getElementById("pathdiv").innerHTML="long/path/to/file"
</script>

My goal is to show a long absolute path right aligned in a relatively narrow div, in a way that its beginning is cut down ( so that the interesting part of the path is shown ). The above code makes the text right aligned if it fits in the div, cuts it if it does not fit, but unfortunately it cuts the end of it, not the beginning.

I could trim the string if it is too long manually, but then I have to calculate somehow how many characters make it fit ( unclear ).

Is their any straightforward way to achieve my goal ( either with CSS or otherwise )?

sbtpr
  • 541
  • 5
  • 18
  • you can use javascript and either regex, or just basic string manipulation to cut off whatever you need. – N. Ivanov Dec 21 '17 at 13:45
  • Could you please elaborate on what part of the path you want to show? (The 'interesting part of the path is shown ') – Shiven Sinha Dec 21 '17 at 13:56

2 Answers2

1

You can use a span inside the div and make it position:absolute and right:0. In this case you will obtain what you need.

add white-space:nowrap; if you will have space in the content to avoid line break

document.querySelector("#pathdiv span").innerHTML="very/very/very-long/path/to/file"
#pathdiv {
  width: 100px;
  overflow: hidden;
  text-align: right;
  position: relative;
}
#pathdiv:before {
 content:"A"; /* Hidden character to create the needed space*/
 visibility:hidden;
}

span {
  position: absolute;
  white-space:nowrap; /* no needed for path (content) without any spaces*/
  right: 0;
  top: 0;
}
<div id="pathdiv">
  <span></span>
</div>

Here is another way using flex and without adding span :

document.querySelector("#pathdiv").innerHTML = "very/very/very-long/path/to/file"
#pathdiv {
  width: 100px;
  overflow: hidden;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  white-space: nowrap;
  height: 20px;
}
<div id="pathdiv">
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • @sbtpr i also added anther solution if interested ;) – Temani Afif Dec 21 '17 at 14:01
  • Thanks for this other suggestion too. I learned a lot from your answer. Sorry to remove the accepted mark, I would really want to keep it, but in the meanwhile there emerged an other, very elegant answer that I accepted and it removed the accepted mark from your answer. – sbtpr Dec 21 '17 at 14:13
  • @sbtpr of course no problem :) it's not a fight ;) the purpose is to provide different working solutions and you are free to pick up what you want ... but all theses solutions will remain usefull for new comers facing the same issue :) – Temani Afif Dec 21 '17 at 14:19
1

<div style="width:100px; overflow:hidden; text-align:right;text-overflow:ellipsis; direction:rtl" id="pathdiv">

<script>
    document.getElementById("pathdiv").innerHTML="long/path/to/file"
</script>

Adding direction(rtl) would work.

hhk
  • 71
  • 4
  • 1
    Whoa! This is breathtakingly simple and elegant. ( Not to mention that it works. ) Even adds three dots at the beginning if the text has to be cut. – sbtpr Dec 21 '17 at 14:08
  • Heads up for people who wait to try this: it stops working when you're using IP addresses or anything with numbers. `1.2.3/long/path` becomes `path/long/1.2.3` – Panossa Mar 06 '23 at 17:02