The problem: you have a long title for a tab (or some other small UI element) and it is important for the client to see all of the content, but you lack the space to show it.

What do you do? Tooltip? Hide the overflow? Truncate with ellipsis?

Here’s a suggestion: “active ellipsis”!

Using a combination of CSS transitions to move and widen a DIV with text-overflow ellipsis, we get a kind of scrolling marquee effect (without using the CSS marquee property) that automatically adjusts its ellipsis-ing. Below shows a brief example first and then a more stylized use of this technique.