如何在 div 中将文本右对齐,使其开头被 overflow:hidden 缩减?

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

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

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

我的目标是在相对狭窄的 div 中显示一条右对齐的长绝对路径,其开头部分被截断(以便显示路径中有趣的部分)。上面的代码使文本在 div 中对齐,如果不适合则将其剪切,但不幸的是它剪切了它的结尾,而不是开头。

我可以 trim 如果手动字符串太长,但我必须以某种方式计算它适合多少字符(不清楚)。

他们是否有任何直接的方法来实现我的目标(使用 CSS 或其他方式)?

您可以在 div 中使用一个 span 并使其成为 position:absoluteright:0。在这种情况下,您将获得所需的东西。

添加white-space:nowrap;如果内容中有space以避免换行

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>

<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) 会起作用。