如何使文本溢出到文本输入的左侧？答案

【问题标题】：How can I cause the text to overflow to the left of my text input?如何使文本溢出到文本输入的左侧？
【发布时间】：2020-04-23 23:35:49
【问题描述】：

我有一个输入字段（宽度可变），其中的文本比它可以显示的要长。默认情况下，它显示字符串的最左边部分（即字符串的第一部分）并隐藏多余的部分（最右边的部分，即字符串的末尾）。

&lt;input type="text" value="abcdefghijklmnopqrstuvwxyz" style="width: 25%; font-size: 25px; margin: 50px;"&gt;

点击输入框，可以移动窗口，查看字符串的任意部分。当光标在字符串的末尾时，只显示结尾部分——字符串的第一部分被截断，并隐藏：

我希望输入字段始终看起来像这样，通过更喜欢切断字符串的前面而不是结尾（仅仅是因为对于这个特定的输入，字符串的结尾比开头更有用） .

不幸的是，使用text-align: right 并不能实现这一点 - 它只会在全文可以容纳时导致文本右对齐：

我宁愿不使用 JS 来削减字符串的长度，因为这会阻止用户对其进行编辑。

明确地说，我希望这种情况一直发生，而不是仅在通过 Use JavaScript to place cursor at end of text in text input element 关注时发生

【问题讨论】：

如果是焦点可以使用stackoverflow.com/questions/511088/…
@GetOffMyLawn 谢谢，是的。我非常希望它一直都在（即使没有集中注意力），尽管我已经将它实现为中途休息。
我认为你可能必须实现一个内容可编辑的 div，这样你就可以控制它的对齐方式。我认为你不能用普通的文本字段来做到这一点。

标签： html css forms

【解决方案1】：

要实现您的目标，请使用content editable div。有了它，您可以使用justify-content 和flexbox。

div[type=text] {
  /* Scroll to the end */
  justify-content: flex-end;
  display: inline-flex;
  
  /* Basic display formatting */
  border: solid 1px black;
  height: 20px;
  width: 100px;
  font-family: sans-serif;
  white-space: nowrap;
  overflow: hidden;
  align-items: center;
}

&lt;div type="text" contenteditable="true"&gt;abcdefghijklmnopqrstuvwxyz&lt;/div&gt;

如果您不喜欢正确的对齐方式，我们可以移除 flexbox 并使用 javascript 来对齐项目：

[...document.querySelectorAll('div[type=text]')].forEach(el => {
  el.scrollLeft = el.scrollWidth;
})

div[type=text] {
  /* Basic display formatting */
  border: solid 1px black;
  height: 20px;
  width: 100px;
  font-family: sans-serif;
  white-space: nowrap;
  overflow: hidden;
  align-items: center;
}

&lt;div type="text" contenteditable="true"&gt;abcdefghijklmnopqrstuvwxyz&lt;/div&gt;

【讨论】：

【解决方案2】：

&lt;input type="text" value="abcdefghijklmnopqrstuvwxyz" style="width: 25%; font-size: 25px; margin: 50px;" dir="rtl" onfocus="this.dir='auto';this.scrollLeft = this.scrollWidth;" onfocusout="this.scrollLeft = this.scrollWidth;"&gt;

【讨论】：

【解决方案3】：

这里的解决方案，你必须添加一个类名来应用css。

<input type="text" class="myclass" value="abcdefghijklmnopqrstuvwxyz" style="width: 
25%; font-size: 25px; margin: 50px;">

CSS

.myclass{
direction: rtl;
text-align: left;

}

【讨论】：

这会改变箭头键的方向，并且当字符串以/开头时似乎也会混淆
我明白了问题

【解决方案4】：

感谢"Scroll" to the very right of a long text input

使用滚动宽度：

<input style="width: 100px" value="abcdefghijklmnopqrstuvwxyz">
<input style="width: 100px" value="abcdefghijklmnopqrstuvwxyz">
<input style="width: 100px" value="abcdefghijklmnopqrstuvwxyz">

$('input').each(function(){ $(this).scrollLeft($(this)[0].scrollWidth) })

正如 tim 所说，dir 属性对于字符 '' '/' '\' 不是一个好的解决方案

【讨论】：

使用输入样式，我看到的唯一问题是，一旦您移除焦点，它就会滚动回到开头。使用 rtl，文本右对齐。