在HTML输入框中右对齐文本

Question

我有一个带有短maxlength但长value属性的HTML标签。 我想要显示的文本显示文本的结尾（右侧），而不是开始（左侧）。

<input maxlength=10 value="A really really really long entry goes in here"/>

目前显示为:

"A really r"

我希望它显示为:

"es in here"

Cheers,

Ian

- IanSR

Answer 1

您想让可见区域从右侧开始吗？ 您可以使用CSS和以下规则：input {direction:rtl;}

rtl 表示从右到左。

例如：http://jsbin.com/ilejo4

注意：在您的HTML中，maxlength 的值必须用引号括起来，并且您还必须设置 input 的 type 属性。

- Sotiris

---

奇怪的是，如果值以斜杠“/”开头（比如文件名）-那么该斜杠会被推到“末尾”，即现在是字符串的右侧。请谨慎使用此功能。 - mr rogers

“rtl”在存在标点符号和数字时不保持顺序！请小心。请参见https://stackoverflow.com/q/53947553/22470。 - powtac

Answer 2

将style="text-align:right"添加到输入标签。

- powtac

---

你能进一步解释一下吗？自从几年前，内联样式的用时不应该结束了吗？ - Nico Haase

Answer 3

如果您只想显示信息，可以在一个 div 中放置一个 span，然后在该 div 中编写 overflow:hidden、display:flex 和 justify-content:flex-end。

.contenedor{
  width: 100px;
  background-color: black;
  color: white;
  border-radius: 5px;
  display: flex;
  justify-content: flex-end;
  overflow:hidden;
  padding: 5px;
}

<div class="contenedor"><span>12345555555566final</span></div>

- Juan Gaytan Sustaita