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!
![Being a Dev Dad]()
I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes...
![Create Spinning Rays with CSS3: Revisited]()
![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...
![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...
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?