将输入框内容快速对齐到右边

Question

我正在创建自定义输入选择器。它使用文本输入来显示选择内容，并使用一个按钮供用户进行选择。它类似于以下代码段：

inputDisplay = document.getElementById("inputDisp");
choosePath = () => {
 const newpath = prompt("Enter new long path", "a/long/long/long/long/long/verylong/long/long/long/long/long/long/verylong/long/path/to/folder/");
 inputDisplay.value = newpath;
}

document.getElementById("btnSel").addEventListener("click", choosePath
);

input {
  width:100%;
}
@media screen and (max-width: 640px){
  input{
  text-align:right;
  }
}

<input id="inputDisp" readonly value="a/path/to/a/folder/">
<button id="btnSel">Select path</button>

我想要的是，当用户调整屏幕大小时，如果没有足够的空间显示整个路径，它将使文本向右对齐。我以为我可以使用媒体查询，但是如果您输入的是短路径并且对齐正确，那么效果就不太好。

只有当文本对于文本框来说太长时，是否有办法使输入框的内容向右对齐？

Answer 1

据我所知，对于纯CSS来说，您可以使用javascript钩住多个事件，并根据输入元素的宽度检查输入字符串的长度，如果字符串长于其长度，则将输入内容的内容向右对齐。 （窗口大小调整，输入更改）