右对齐 HTML 输入字段中的文本答案

【问题标题】：Right align text in HTML input field右对齐 HTML 输入字段中的文本
【发布时间】：2011-06-25 19:14:18
【问题描述】：

我有一个 HTML 标签，它的 maxlength 很短，但 value 属性却很长。我希望显示的文本显示文本的 end（右侧），而不是开始（左侧）。

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

目前显示：

“一个真正的人”

我希望它显示：

“在这里”

干杯，

伊恩

【问题讨论】：

标签： html css filter tags text-alignment

【解决方案1】：

您希望可见区域从右侧开始吗？您可以使用 css 和以下规则 input {direction:rtl;}

rtl 表示从右到左

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

PS：你的html中maxlength的值必须用引号括起来，你还必须设置input的type

【讨论】：

奇怪的是，如果值以斜杠 / 开头（如文件名） - 斜杠被推到现在是字符串右侧的“末尾”。小心使用。
-1 "rtl" 有标点和数字时不保持顺序！当心。见stackoverflow.com/q/53947553/22470

【解决方案2】：

在输入标签中添加style="text-align:right"。

【讨论】：

您能进一步解释一下吗？多年来，内联样式的时代不应该结束了吗？

【解决方案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;
}

&lt;div class="contenedor"&gt;&lt;span&gt;12345555555566final&lt;/span&gt;&lt;/div&gt;

【讨论】：