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

  • By
    An Interview with Eric Meyer

    Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    :valid, :invalid, and :required CSS Pseudo Classes

    Let's be honest, form validation with JavaScript can be a real bitch.  On a real basic level, however, it's not that bad.  HTML5 has jumped in to some extent, providing a few attributes to allow us to mark fields as required or only valid if matching...

  • By
    Morphing Elements Using MooTools and CSS

    Morphing an element between CSS classes is another great trick the MooTools JavaScript library enables you to do. Morphing isn't the most practical use of MooTools, but it's still a trick at your disposal. Step 1: The XHTML The block of content that will change is...

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!