Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Source Link
URL Rewriter Bot
URL Rewriter Bot

I have run into this gremlingremlin over the past week as well.

I have run into this gremlin over the past week as well.

I have run into this gremlin over the past week as well.

<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 javasriptjavascript 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;      //DeterminDetermine 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.   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> 
<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.   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> 
<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 javascript 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;    //Determine 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. 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> 
Specify code language so it highlights right
Source Link
<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. 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> 
<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. 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> 
<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. 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> 
<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. 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> 
better-worded formula
Source Link
ray
  • 8.7k
  • 8
  • 46
  • 58
Loading
another code fix
Source Link
ray
  • 8.7k
  • 8
  • 46
  • 58
Loading
Source Link
ray
  • 8.7k
  • 8
  • 46
  • 58
Loading