Question

我使用以下代码来对齐输入文本字段的内容：

Path <input type="text" value="http://stackoverflow.com/questions" style="text-align: right;">

问题：
这在长文本的情况下不起作用。

由于我正在显示文件夹路径，所以我有兴趣显示最后一个文件夹我浏览了许多与文本对齐相关的帖子帖子，但他们都建议使用“text-align：right”。

Answer 1

您可以将文本输入的direction更改为rtl，以便显示路径的最后部分。

有关详细信息，请参阅我在此处对类似问题的回答：

How to cut off overflow on the left side

＆＃13;

input[type="text"] {
  /* text-align: right; */
  direction: rtl;
}

＆＃13;

Path <input type="text" value="https://stackoverflow.com/questions">

＆＃13;

Answer 2

rtl hack很不错，但是如果你真的想改变这个值就很难。如果你不想那样，为什么一开始就把它变成input？

所以或者，您可以使用一段Javascript将光标设置在输入的末尾：

// Wrap it in a function, if you like.
function selectEnd(input) {
    var pos = input.value.length;
    input.setSelectionRange(pos, pos);
    input.blur(); // Switch from not focus..
    input.focus(); // .. to focus, to force the cursor into view.
}

// Call it for your input.
selectEnd(document.getElementById('path'));

Path <input id="path" type="text" value="http://stackoverflow.com/questions" style="text-align: right;">

Answer 3

尝试这样做，只将此属性添加到此标记dir="rtl"

<input type="text" value="http://stackoverflow.com/questions" dir="rtl">

text-align表示输入标签

3 个答案: