How can I align text to the right in a div so its beginning is cut down with overflow:hidden? [duplicate]

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

Answer 2

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>