title: Truncate cell value with jQuery
body: <p>I have a table that has 100% width. It is generated dynamically with values from my db. I need to truncate <code>TH</code> values if they do not fit in the table, without pushing the boundaries of the cell. If the value is truncated I'd like to add a link with <strong>...</strong> and put the full length label into title tag. I don't need it to expand. Something like this:</p>
  
  <pre><code>&lt;th&gt;
     Long label&lt;a href="javascript:void(0)" title="$myFullValue"&gt;...&lt;/a&gt;
  &lt;/th&gt;
  </code></pre>
  
  <p>I'm not sure how to get the value of the string...</p>
  
  <pre><code>$("TH").width();
  $("TH").val().width(); ??
  </code></pre>
  
  <p>I know there are some jQuery plugins out there but I was not able to find what I need and I thought I could try and give this project my own whirl. </p>
  
  <p><a href="http://jsfiddle.net/b3cQZ/3/" rel="nofollow">http://jsfiddle.net/b3cQZ/3/</a></p>
  
  <hr>
  
  <p>EDIT: </p>
  
  <p>Just an idea that crossed my mind. Couldn't I wrap the label in  tags and get it's width. At the same time get the width of the parent TH. If labe's width is greater, I could </p>
  
  <ol>
  <li>subtract, say 20 px (for ...) from TH width and, </li>
  <li>assign that width to span's width </li>
  <li>while adding <strong>overflow:hidden</strong>, and </li>
  <li>appending "..." to the span</li>
  </ol>
  
  <p>Won't this work?  </p>