text-overflow: ellipsis in Firefox 4

Firefox 4 does not support text-overflow: ellipsis. It also dropped support for XUL on the web, which means the previously <xul:description>-based workarounds do NOT work anymore.

HTML

<div class="small-text">
<div class="short-text ellipsis monospaced">Do androids dream of electric sheep?</div>
<div class="short-text ellipsis monospaced">42.</div>
<div class="short-text ellipsis proportional">Do androids dream of electric sheep?</div>
<div class="short-text ellipsis proportional">42.</div>
</div>

<div class="medium-text">
<div class="short-text ellipsis monospaced">Do androids dream of electric sheep?</div>
<div class="short-text ellipsis monospaced">42.</div>
<div class="short-text ellipsis proportional">Do androids dream of electric sheep?</div>
<div class="short-text ellipsis proportional">42.</div>
</div>

<div class="big-text">
<div class="short-text ellipsis monospaced">Do androids dream of electric sheep?</div>
<div class="short-text ellipsis monospaced">42.</div>
<div class="short-text ellipsis proportional">Do androids dream of electric sheep?</div>
<div class="short-text ellipsis proportional">42.</div>
</div>

<a href="http://img7.imageshack.us/i/notextoverflowellipsisi.jpg/"><img src="http://img7.imageshack.us/img7/251/notextoverflowellipsisi.jpg" alt="U mad?"></a>

CSS

.short-text {
     width: 150px;
     overflow: hidden;
     white-space: nowrap;
     display: block;
     margin-bottom: 1ex;
 }
 
 .monospaced {
     font-family: courier, monospace;
 }
 
 .proportional {
     font-family: helvetica, sans-serif;
 }
 
 .ellipsis {
     text-overflow: ellipsis;
 }
 
 :-moz-any(.force-ellipsis):before {
     background: #fff;
     content: "…";
     position: absolute;
     margin-left: -moz-calc(200px - 1em);
     width: 1em;
     height: 1em;
 }
 .small-text {font-size: 9px}
 .big-text {font-size:20px}

JavaScript

function forceEllipsis(rootEl) {
     rootEl = rootEl || document.body;
     
     var i,
         currentElement,
         elements = rootEl.getElementsByClassName("ellipsis");
     
     for (i = elements.length; i--;) {
         currentElement = elements[i];
         
         if (currentElement.scrollWidth !== currentElement.offsetWidth) {
             currentElement.classList.add("force-ellipsis");
         }
     }
 }
 

     var textOverflowSupported = typeof document.createElement("span").style.textOverflow === "string";
     
     if (navigator.product === "Gecko" && !textOverflowSupported) {
         forceEllipsis();
     }