User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm having some issues when the user types extensive text in a small input field.

I need some good way to display data that will be cut off.

I tried to use a Bootstrap based Tooltip or Popover on hover but I'm already using this kind of component for validation.

Here's an example of what I'm talking about.

<input type="text" style="width: 50px" value="xxxxxxxxxxx xxxxxxxxxxxx xxxxxxxxxxxxxx">

Is there a good way to display all the data inside this input?

share|improve this question
Can you provide some more context? Why does the component have to be so small? (Is it for a mobile display? Is there a lot of data displayed on the screen that can be edited in-line? Are there other external constraints on the layout?) – Graham Herrli Apr 20 '13 at 1:03
I have seen a couple of examples now of controls that color the text that would be truncated. Makes it very obvious, especially if combined with a character count indication of how many characters left / too long. – Marjan Venema Apr 20 '13 at 9:58

I had came across this issue a few months back and I tried to find its solution. To me the best and most inexpensive solution is to place the text underneath the input field and only do so if entered text gets longer than the width of input text. This shouldn't be done unless entered or displayed information is important and there is risk of mistake if entire text is not displayed.

enter image description here

share|improve this answer
This is okay, but I can imagine novice users (who hunt and peck the keyboard) will look up to their screen, see this text and think that is where they have entered their input. It would be difficult for such users to edit their input -- they may well click the text, press backspace and lose their entire entry. – Brendon Apr 20 '13 at 12:13

You could use a textarea instead of a text field and then use a jquery plugin like Autosize to allow the field to grow as needed.

share|improve this answer
This works for Text Areas which are nevertheless re-sizable. – Salman Ali Apr 20 '13 at 3:16
Thank you @Salman, I should have made that clear in my answer to begin with. – Dave Nelson Apr 20 '13 at 3:23

I would use the title to allow the user to hover over the input and view all of the text.


<input type="text" title="something that exceeds the width of the box" value="something that exceeds the width of the box">

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.