text-overflow work

HTML

<li class="firehover" id="asset1058"><a rel="filterAssetid,1058" class="slavesubmit">6-20-1991 BeachBirds Performance Video</a></li>
<li class="firehover" id="asset1058"><a rel="filterAssetid,1058" class="slavesubmit">6-20-1991 BeachBirds Performance Video</a></li>
<li class="firehover" id="asset1058"><a rel="filterAssetid,1058" class="slavesubmit">6-20-1991 BeachBirds Performance Video</a></li>
<li class="firehover" id="asset1058"><a rel="filterAssetid,1058" class="slavesubmit">6-20-1991 BeachBirds</a></li>

CSS

* { font-family: Arial;  font-size: 12px; padding: 12px; list-style:none;}
A {
    text-overflow: ellipsis;
    border: 1px solid steelblue;
    border-bottom:none;
    overflow: hidden;
    height: 49px;
    line-height: 49px;
    width: 200px;
    ZZmin-width: 200px;
    padding: 8px;
    display: block;
    white-space: nowrap;
    position:relative;
    text-indent: 0;
    ZZ-moz-transition: text-indent 200ms ease;
    -moz-transition: none;
    cursor: pointer;
    text-align: left;
    text-justify: distribute;

}
A.didscroll:hover {
    text-indent: -10%;
    text-overflow: inherit;
    -moz-transition: text-indent 2600ms ease-out;
    -webkit-transition: text-indent 2600ms ease-out;
    ZZ-moz-transition: none;
    text-align: right;
    margin-right: 100%;
}

JavaScript

var scrollables = Array.filter( $$('A'), function(itm,index) { 
return itm.scrollWidth > itm.clientWidth;
    console.log(itm.get('clientWidth'),itm.get('scrollWidth')) 
    });
    Array.each(scrollables, function(itm,idx){
        itm.addClass('didscroll');
    });