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

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

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

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

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

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

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

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

解决方案：

要实现您所需要的功能，请使用 内容可编辑. 有了它，你可以使用 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;
}

<div type="text" contenteditable="true">abcdefghijklmnopqrstuvwxyz</div>

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

cssformshtml

赞 (0)

运维实战侠默认组

0 0 打赏 微信扫一扫 支付宝扫一扫

生成海报