Question

我有一个像这样的输入元素：

<input value="hello world" class="my-input"/>

但是在UI中我只想显示'hello'而没有'world'（也就是说，我想显示值的前5个字母）

我可以使用my-input类实现这一点吗？我该怎么办？

由于

Answer 1

你不能仅仅在CSS中这样做，但使用jQuery是相当简单的：

var myInputVal = $(".my-input").val();
$(".my-input").val(myInputVal.substr(0, 5));

请参阅DEMO。

如果你需要保留输入的原始值（这样当提交表单时，它会发送“hello world”而不是“hello”），你可以使用HTML数据属性来“存储”原始值，然后在提交表单时检索它，如下所示：

var myInput = $(".my-input");
var myInputVal = myInput.val();

myInput.data("original-value", myInputVal);
myInput.val(myInputVal.substr(0, 5));

$("form").submit(function(e) {
  e.preventDefault();
  myInput.val(myInput.data("original-value"));
  $(this).submit();
});

Answer 2

这是 pure CSS solution

HTML:
<input value="1234567890" class="my-input" />

CSS:
input {
    font-family: monospace;
    font-size: 1em;
    width: 3.2em;
    padding: 0;
}

使用width单位中表达的em但

你要使用等宽字体（或 m 会大于 i ）
1em等于用户最终在其系统中看到的特定等宽字体中 M 的高度，而不是其宽度。使用我当前的Windows Vista，我将默认等宽线设置为3.2em的宽度，但您的里程可能会有所不同。

因此，您必须在您选择的字体集中进行特别细致的测试并在各种Windows操作系统上进行测试（XP，Vista，Win7和Win8都安装了特定的字体，也取决于安装或不安装的MS Office和Adobe Reader，，如果网页设计师/开发人员成为目标，像Visual和Creative等工具，OS X和Linux的风格。和手机。或者您可以通过font-family下载的字体开始@font-face，然后继续使用每个操作系统上具有相似宽度的字体...

如果用户禁用或自定义CSS，那就是失败，因此您不应该依赖输入的宽度来传达含义或做某种技巧。这还不够健壮（盲人用户显然既不关心也不会感觉到您的输入在视觉上仅限于5个字符的显示但仍包含更多字符。）

Answer 3

我认为只用CSS就可以做到这一点。您可以使用maxlength HTML属性或在JavaScript中执行某些操作。我意识到这不是你所要求的，但我认为这不可能。

Answer 4

新的HTML5属性maxlength限制了输入中的字符数。（jsFiddle）

<input value="hello" class="my-input" maxlength="5" />

Apparently support for this is quite good.

如果您想要保留有关原始字符串“hello world”的信息，则需要使用JavaScript，它不能完全用CSS实现。您可以通过使用width / overflow属性来接近，但它会因设备而异。

如何用css隐藏额外的文本？

4 个答案: