Placeholders and Overflow

By  on  

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!

Recent Features

Incredible Demos

  • By
    Font Replacement Using Cufón

    We all know about the big font replacement methods. sIFR's big. Image font replacement has gained some steam. Not too many people know about a great project named Cufón though. Cufón uses a unique blend of a proprietary font generator tool...

  • By
    Fixing sIFR Printing with CSS and MooTools

    While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix...

Discussion

  1. Giona

    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

    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?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!