Once upon a time, an otherwise excellent designer colleague had an unfortunate habit. He would create beautiful, usable web page designs with but one flaw: wireframes and mockups built around dummy content rather than the site’s actual text.

Of course, even if a page is designed around real content, that’s no guarantee that needs won’t change in the future as new content gets added. What’s a coder to do?

You could always trim the string by character count during rendering, but that’s so 2003 (and not exactly pixel precise). Or you could break out some fancy CSS3, with some overflow: hidden and text-overflow: ellipsis action. But even then, some of the content is still hidden from the user! There’s got to be a better way!

Now there is: HoverForMore.js!¹ Too busy to vist the example page? Just point your pointy-dealie at the title to this page! (Or right here!) Boom! Pow! Kazinga!

I welcome your feedback, bug reports and of course, pull requests.

And they all lived happily ever after.