title: Javascript code to shorten long text needs optimization
body: <p><strong>NOTE:</strong>  Originally had this listed as a memory leak.  After looking into this deeper, I discovered that it's not a memory issue.  It's just a very slow script.  Any suggestions to speed this up would be greatly appreciated.</p>
  
  <p><strong>ANOTHER NOTE:</strong>  After looking into this even further, I see that FF does not support any type of CSS that formats text in overflow.  There is a <a href="http://www.mattsnider.com/css/css-string-truncation-with-ellipsis/" rel="nofollow">hack</a> and a <a href="http://www.mattsnider.com/javascript/dynamically-updating-content-of-firefox-ellipsis-hack/" rel="nofollow">workaround</a> for that hack...but that will not be a suitable solution.</p>
  
  <p>I have voted for and joined the e-mail list on this <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=312156" rel="nofollow">particular bug</a> at mozilla.  It's almost six years old so I resolve that users will just have to deal with it for now.  At least it's not a common scenario for our product.</p>
  
  <p><strong>Original post:</strong></p>
  
  <p>The script truncates the value of an element and appends '...' while its scrollWidth is greater than it's offsetWidth. (e.g. A value of "LastName, VeryLongFirstName"will change to something like "LastName, Ver...", depending on the width of the column)</p>
  
  <pre><code>var eTable = document.getElementById(this._eDiv.id + "_tbl");
  
  //...lots of code here...
  
  //function called that gets all cells in a table, loops through them and clips the text
  addEventListenerEx(window, "load", function() {     
          var aCells = eTable.getElementsByTagName("DIV");
          window.alert(aCells.length);   
              //When aCells is length of 100, we're ok...but when it's big (like 3,000) I have problems         
          for (var i = 0; i &lt; aCells.length; i++){
              Grid.clipText(aCells[i]);
          }
  }, false);
  
  //...lots of code here...
  
  //This is the function doing the actual clipping
  Grid.clipText = function (oDiv) {   
  
      //for tooltip       
      var oCurDiv;
      var oTagA;
      var sToolTip;       
      if (oDiv.firstChild) {
              if (oDiv.firstChild.firstChild){            
                  oCurDiv = oDiv.firstChild;
                  while (oCurDiv) {
                      if (is.ie) {
                          oTagA = oCurDiv;                        
                      } else {
                          // there are some different between IE &amp; FireFox.
                          oTagA = oCurDiv.firstChild.parentNode;                      
                      }
                      if (oTagA.tagName == "A") {
                          sToolTip = oTagA.innerHTML;     
                          if (sToolTip.indexOf('&lt;b&gt;') &gt; 0) {
                              sToolTip = sToolTip.replace('&lt;b&gt;',"");
                              sToolTip = sToolTip.replace('&lt;/b&gt;',"");
                          }
                          if (sToolTip.indexOf('&lt;B&gt;') &gt; 0) {
                              sToolTip = sToolTip.replace('&lt;B&gt;',"");
                              sToolTip = sToolTip.replace('&lt;/B&gt;',"");
                          }                       
                          oTagA.parentNode.title = convertHTMLToText(sToolTip);
                      }
                      oCurDiv = oCurDiv.nextSibling;                                      
                  }
              } else {
                  oDiv.title = convertHTMLToText(oDiv.innerHTML);
              }
          }
  
          //NOTE:  Additional steps to take for non-IE browsers
          if (!is.ie) {
                      var oText = oDiv;           
                      while (oText.nodeType != 3) {
                          oText = oText.firstChild;
                      }
  
                      var sDisplayText = oText.nodeValue;
                      if (sDisplayText.length &lt; 3) return; 
  
                      var lastThree;
                      sDisplayText = sDisplayText.slice(0, parseInt(oDiv.offsetWidth / 5));
                      oText.nodeValue = sDisplayText + "...";
  
                      //NOTE:  Bad things happen here because of this loop
                      while (oDiv.scrollWidth &gt; oDiv.offsetWidth &amp;&amp; sDisplayText != "") {
                          lastThree = sDisplayText.slice(-3);
                          sDisplayText = sDisplayText.slice(0, sDisplayText.length - 3);
                          oText.nodeValue = sDisplayText + "...";
                      }
                      oText.nodeValue = sDisplayText + lastThree.slice(0, 1) + "...";
                      while (oDiv.scrollWidth &gt; oDiv.offsetWidth &amp;&amp; sDisplayText != "") {
                          oText.nodeValue = sDisplayText + "...";
                      }
                  }
  </code></pre>
  
  <p>The code works.  However, the problem is that it's called over and over again after a table is loaded on the page.  When the table is huge (>1,500 cells), that's when the issue starts.  </p>
  
  <p>So, I'm really looking for a way to make this sample (particularly the WHILE loop) more efficient.</p>