CSS/JQuery powered sideways scrolling text on hover

Question

I have a twitter feed on a website I run. However, it gets cut off on small screens. I have a bar tall enough for 1 line of text in which I have the latest tweet. I want the tweet to ellipsize or fade out at the end if it is too long. But on hover, I want the text to slide slowly to the left, thus exposing the hidden part.

This effect is used on the iPod classic when you highlight a song that has a title that is wider than the screen. (I hope you understand what I'm going for.)

I'm just curious how I would go about implementing something like this? How can I force the text to stay on one line?

Answer 1

At last, here's my entry: http://jsfiddle.net/sdleihssirhc/AYYQe/3/

Cool stuff:

1. Library agnostic
2. Uses scrollLeft instead of absolute positioning, so it's smoother and faster
3. Uses text-overflow:ellipsis instead of adding any DOM elements