I am evaluating ideas for displaying that there is hidden overflow text in a fixed-size single-line input box.

I this data entry application, we need to keep a particular textbox's width as narrow as possible. 98% of the time it will contain 7 characters or less, but occasionally can contain 40+ characters.

The same screen is used later by another user for review and I want the 2nd user to be able to know that the textbox contains more text.

This post suggests an interesting approach, but not one that I think is visually elegant. I have considered an overflow:ellipsis style, removing it on focus. Also considered changing the size of the input box to grow with the text (pseudo-responsive) but I really don't want the page reflowing while the user is typing.

Has anyone seen any other approaches that I should be considering?

  • What's wrong with the default behavior where the additional text is visually cut off? Simply make the text box 8 or 9 characters in length so there's almost always white space at the end of the box.
    – quietmint
    Commented Aug 20, 2013 at 0:04
  • The issue isn't that the default method doesn't work - it's that it's an inelegant solution.
    – Arman
    Commented Aug 20, 2013 at 0:48
  • 3
    Does it still have to be an input field in the review situation? Why not tailor the UI more towards what each user needs instead of trying for a one-size-fits-all solution? Commented Aug 20, 2013 at 8:00
  • @KoenLageveen Good point, although in this case the reviewer can make changes and does it in the same manner as the original user (it is a quality review process). Commented Aug 21, 2013 at 1:29

3 Answers 3


Here's an option:

You could temporarily make the text box bigger.

While active, you would increase the size of the text-box, turning it into a bigger area. Here's a quick mockup.

Before overflow happens: enter image description here

When overflow happens: enter image description here

When a field has too much text: enter image description here

Or perhaps a bit more slick: enter image description here

Things of note:

  • To make sure other elements in your design don't start jumping around, you should make sure it jumps out of its context, and not affect the flow of the design anymore (think absolute position in the case of a web-based application)
  • You might have to make sure that it's dismissible (a small x in a corner or similar) because it could overlap other form fields, making it harder for someone to access that field.
  • In the "When overflow happens" mockup I've added a shadow to indicate that its position is different than before, making it seem as though it "jumps out"
  • A type of drop-shadow on the left can make it seem as though that side is overlapping more text. Take into account that the drop shadow has to be large enough to look good even when the border isn't exactly on top of half a letter.


The general idea is to show that you're hiding something, and that layering your UI can help out here. What type of graphics you come up with depends on the rest of your application.

Ps.: It seems I totally misread the question at first, making my answer seems like a bit of a shot-gun approach. I'm going to leave it up though, as most of the extra guff seems to cover further questions that may arise.

  • I like the approaches. I identify with the approach of not changing the shape of the input. The requirement is to keep it as small as possible because there are a number of other input controls in a small vicinity. (BTW, I did not edit the question at all). Commented Aug 21, 2013 at 1:48
  • Cool, that means I totally misread the question :] No worries, I edited my edit ;) Cheers!
    – Dirk v B
    Commented Aug 21, 2013 at 2:32

I think, the following cite from UsabilityPost is applicable to your case:

This might sound banal, but there are often cases where blindly following best practices and design theory slowly pulls you off the right track, so that you end up designing something for the sake of a good design — whatever that is — rather than for actual use.

Any solution for elegant text hiding pushes reviewer to more interaction which could lead to following outcomes:

  • Missing the text checking by error (unusual control or interaction, bad solution, etc.)
  • Skiping the text checking as more activity is required
  • Checking the text with additional time consuming and possible usability frictions

I do not propose a solution, just warn of its cost.

  • I'd love to add that to my response, but don't want to steal any glory, so I'll leave it at a +1.
    – Dirk v B
    Commented Aug 20, 2013 at 22:32

Building on this post and the ideas from @Kiorrik ... I came up with this approach.

3-State Text Overflow UX

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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