如何使文字溢出到我的文字输入的左边?

我有一个输入字段(宽度可变),其中的文本长度超过了它的显示范围。默认情况下,它显示字符串最左边的部分(即字符串的第一部分),并隐藏多余的部分(最右边的部分,即字符串的末端)。

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

input by default cutting off the end of the string

当人们在输入栏中点击时,可以移动窗口,查看字符串的任何部分。当光标在字符串的末尾时,只显示末尾部分–字符串的第一部分被切断,并被隐藏。

text when focused with cursor at the end

我希望输入字段总是这样的,我倾向于切断字符串的前面,而不是末端(只是因为对于这个特定的输入,字符串的末端比开头更有用)。

使用 text-align: right 不幸的是,它并没有实现这一点–它只是在全文可以容纳的情况下,才会使文本右对齐。

text which can all fit, and is then right aligned

我不希望使用JS来剪切字符串的长度,因为这将阻止用户编辑它。


说白了,我希望这种情况能一直发生,而不是只在通过关注 使用JavaScript将光标放置在文本输入元素的文本末尾。

解决方案:

要实现您所需要的功能,请使用 内容可编辑. 有了它,你可以使用 justify-contentflexbox.

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;
}
<div type="text" contenteditable="true">abcdefghijklmnopqrstuvwxyz</div>

本文来自投稿,不代表运维实战侠立场,如若转载,请注明出处:https://www.shizhanxia.com/900.html

(0)
上一篇 2022年6月29日 下午4:01
下一篇 2022年6月29日 下午4:01

相关推荐

发表评论

登录后才能评论