Truncate cell value with jQuery
<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>
