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?