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

Question

<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 或其他方式）？

Answer 1

您可以在 div 中使用一个 span 并使其成为 position:absolute 和 right: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>

Answer 2

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

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

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

html

css

overflow

hidden

right-align