Overflow marquee demo

Demo: 1) clip a long, unbroken text string to fit within containing box 2) append ellipsis to this abbreviated text 3) on hover, scroll the text to reveal entire string Note: only works in Chrome and Safari. W3C: http://www.w3.org/TR/css3-marquee/

HTML

<div class="overflow-marquee">MyReallyReallyReallyVeryLongTextString</div>

CSS

body {
    font:400 14px Arial;   
}
.overflow-marquee {
    background:#eee;
    border:10px solid #eee;
    overflow-x:hidden;
    text-overflow:ellipsis;
    width:200px;
}
.overflow-marquee:hover {  
    text-indent:-200px;
    text-overflow:clip;
    /* w3c candidate recommendation */
    marquee:left 1 slow slide;
    overflow-x:auto;
    overflow-style:marquee-line;
    /* webkit specific */
    -webkit-marquee-direction:left;
    -webkit-marquee-increment:small;
    -webkit-marquee-repetition:1;
    -webkit-marquee-speed:fast;
    -webkit-marquee-style:slide;
    overflow-x:-webkit-marquee;
}