Placeholders and Overflow
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!
![7 Essential JavaScript Functions]()
I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent. Times have changed but there are still a few functions each developer should...
![Create Spinning Rays with CSS3: Revisited]()
![Add Controls to the PHP Calendar]()
I showed you how to create a PHP calendar last week. The post was very popular so I wanted to follow it up with another post about how you can add controls to the calendar. After all, you don't want your...
![Input Incrementer and Decrementer with MooTools]()
Chris Coyier's CSS-Tricks blog is everything mine isn't. Chris' blog is rock star popular, mine is not. Chris prefers jQuery, I prefer MooTools. Chris does posts with practical solutions, I do posts about stupid video-game like effects. If I...
Cool! I never thought about it, i just robotically styled the placeholder’s text color and similar, but that’s really a “responsive” glance
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?