How to hide extra text with css?

Question

I have an input element something like this:

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

But in the UI I only want to display 'hello' without 'world' (that is, i want to display first 5 letters of the value)

Is it possible that i achieve this using my-input class? how should i do?

Thanks

Answer 1

You can't do this purely in CSS, but it's fairly trivial using jQuery:

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

See DEMO.

If you need to preserve the original value of the input (so that when the form is submitted, it sends "hello world" instead of "hello"), you can use an HTML data attribute to "store" the original value, and then retrieve it when the form is submitted, like this:

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

Here's a pure CSS solution

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

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

using width expressed in em unit BUT:

• you've to use a monospace font (or an m would be larger than an i)
• 1em is equal to the height of an M in the particular monospace font the user will finally see in its system, not its width. With my current Windows Vista, I set a width of 3.2em with default monospace but your mileage will likely vary.

Thus you've to be particular meticulous in your chosen set of fonts and test on various Windows OS (XP, Vista, Win7 and Win8 all have their particular fonts installed, also depending on MS Office and Adobe Reader installed or not and, if web designers/developers are targeted, tools like Visual thing and Creative blah), OS X and flavors of Linux. And mobiles. Or you could begin your font-family by a font downloaded via @font-face and then continue with fonts having similar widths on each OS...

If CSS are disabled or customized by the user, that's a failure so you shouldn't rely on the width of the input for conveying meaning or doing a certain trick. That's not robust enough (and blind users will obviously neither care nor perceive that your input is visually limited to the display of 5 characters but still contains more characters).

Answer 3

I don't think it is possible to do this with only CSS. You could use the maxlength HTML attribute or do something in JavaScript. I realize that's not what you're asking for, but I don't think it's possible.

Answer 4

There is a new HTML5 attribute maxlength which restricts the number of characters in the input. (jsFiddle)

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

Apparently support for this is quite good.

If you meant you want to keep information about the original string "hello world" you would need to use JavaScript, it cannot be achieved purely with CSS. You could get close by playing with the width/overflow attributes but it will differ from device-to-device.