Как я могу выровнять текст по правому краю в div, чтобы его начало было обрезано переполнением: скрыто?

Question

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

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

Моя цель - показать длинный абсолютный путь, выровненный по правому краю в относительно узком элементе div таким образом, чтобы его начало было обрезано (чтобы была показана интересная часть пути). Приведенный выше код выравнивает текст по правому краю, если он помещается в div, обрезает его, если он не подходит, но, к сожалению, он обрезает конец, а не начало.

Я мог бы обрезать строку, если она слишком длинная, вручную, но тогда мне нужно как-то посчитать, сколько символов подойдет (неясно).

Есть ли какой-нибудь простой способ достичь моей цели (с помощью CSS или иным способом)?

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>

Добавление направления (RTL) будет работать.

Answer 2

Вы можете использовать span внутри div и сделать его position:absolute а также right:0, В этом случае вы получите то, что вам нужно.

добавлять white-space:nowrap; если у вас будет место в содержании, чтобы избежать разрыва строки

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>

Вот еще один способ использования flex без добавления 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>