Placeholders and Overflow

Written by David Walsh on December 13, 2012 · 2 Comments

Oftentimes our search boxes and other form fields get drastically shortened on mobile devices.  Unfortunately in some circumstances the INPUT element's placeholder text doesn't fit within the length of the element, thus displaying an ugly "cut off."  To prevent this ugly display, you can use CSS placeholder styling and text-overflow: ellipsis!

input[placeholder] { text-overflow: ellipsis; }
::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
input:-moz-placeholder { text-overflow: ellipsis; }

Most developers are unaware of each of the properties and even fewer are aware that they are so perfectly complimentary!

Comments

  1. Cool! I never thought about it, i just robotically styled the placeholder’s text color and similar, but that’s really a “responsive” glance

  2. Prachi July 22, 2013

    Hello Sir

    Is there a way to handle overflow of an input text element? Currently, browsers hide the extra text. You have to scroll to read it completely. What if I wanted to handle it a little differently? For example, show an ellipses? Would you know a possible solution for this?

Be Heard

Tip: Wrap your code in <pre> tags or link to a GitHub Gist!

Use Code Editor
Older
pointer Media Query
Newer
CSS calc