I have run into this gremlin over the past week as well.
Since the accepted solution does not account for variable width fonts and wwwhack's solution has a While Loop, I will throw in my $.02.
I was able to drastically reduce the processing time of my problem by using cross-multiplication. Basically, we have a formula that looks like this:
The variable x in this case is what we need to solve. When returned as an Integer, it will give the new length that the over-flowing text should be. I multiplied the MaxLength by 80% to give the ellipses enough room to show.
Here is a full html example:
<html> <head> <!-- CSS setting the width of the DIV elements for the table columns. Assume that these widths could change. --> <style type="text/css"> .div1 { overflow: hidden; white-space: nowrap; width: 80px; } .div2 { overflow: hidden; white-space: nowrap; width: 150px; } .div3 { overflow: hidden; white-space: nowrap; width: 70px; } </style> <!-- Make a call to Google jQuery to run the javascript below. NOTE: jQuery is NOT necessary for the ellipses javasript to work; including jQuery to make this example work --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Loop through each DIV element $('div').each(function(index) { var myDiv = this; //The original Div element which will have a nodeType of 1 (e.g. ELEMENT_NODE) var divText = myDiv; //Variable used to obtain the text from the DIV element above //Get the nodeType of 3 (e.g. TEXT_NODE) from the DIV element. For this example, it will always be the firstChild divText = divText.firstChild; //Create another variable to hold the display text var sDisplayText = divText.nodeValue; //Determin if the DIV element is longer than it's supposed to be. if (myDiv.scrollWidth > myDiv.offsetWidth) { //Percentage Factor is just a way of determining how much text should be removed to append the ellipses //With variable width fonts, there's no magic number, but 80%, should give you enough room var percentageFactor = .8; //This is where the magic happens. It uses cross-multiplication to //[img]http://www.texify.com/img/%5CLARGE%5C%21%5Cfrac%7Bx%7D%7BsDisplayText.length%7D%3D%5Cfrac%7B%28myDiv.offsetWidth%20%2A%20percentageFactor%29%7D%7BmyDiv.scrollWidth%7D.gif[/img] //[img]http://www.texify.com/img/%5CLARGE%5C%21x%3D%5Cfrac%7B%28myDiv.offsetWidth%20%2A%20percentageFactor%29%20%2A%20sDisplayText.length%7D%7BmyDiv.scrollWidth%7D.gif[/img] var sliceFactor = ((myDiv.offsetWidth * percentageFactor) * sDisplayText.length) / myDiv.scrollWidth; sliceFactor = parseInt(sliceFactor); //Get the value as an Integer sDisplayText = sDisplayText.slice(0, sliceFactor) + "..."; //Append the ellipses divText.nodeValue = sDisplayText; //Set the nodeValue of the Display Text } }); }); </script> </head> <body> <table border="0"> <tr> <td><div class="div1">Short Value</div></td> <td><div class="div2">The quick brown fox jumps over the lazy dog; lots and lots of times</div></td> <td><div class="div3">Prince</div></td> </tr> <tr> <td><div class="div1">Longer Value</div></td> <td><div class="div2">For score and seven year ago</div></td> <td><div class="div3">Brown, James</div></td> </tr> <tr> <td><div class="div1">Even Long Td and Div Value</div></td> <td><div class="div2">Once upon a time</div></td> <td><div class="div3">Schwarzenegger, Arnold</div></td> </tr> </table> </body> </html> I understand this is a JS only fix, but until Mozilla fixes the bug, I'm just not smart enough to come up with a CSS solution.
This example works best for me because the JS is called every time a grid loads in our application. The column-width for each grid vary and we have no control over what type of computer our Firefox users view our app (which, of course, we shouldn't have that control :) ).