jquery or javascript: Truncate text in table cell
<p>I need to truncate the text in the first column of a table using javascript or jQuery. Here's where I'm at:</p>

<p>The table:</p>

<pre><code>&lt;table id="bigTable"&gt;
    &lt;tr&gt;&lt;td&gt;Text is tooooo looong&lt;/td&gt;&lt;td&gt;Just Right&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Text is tooooo looong&lt;/td&gt;&lt;td&gt;Just Right&lt;/td&gt;&lt;/tr&gt;
    &lt;tr&gt;&lt;td&gt;Text is tooooo looong&lt;/td&gt;&lt;td&gt;Just Right&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>Trying stuff like the following without success ( compiled from other similar posts ):</p>

<pre><code>var lbl = $("#bigTable tbody");
var newLbl = $(lbl[0].outerHTML);
$('td:eq(0)', newLbl).slice(5);
</code></pre>

<p>It does not seem to be getting the contents, or text from the cells. Has no effect whatsoever. Tried also -</p>

<pre><code>$('td:eq(0)', newLbl)contents().slice(5);


$('td:eq(0)', newLbl).text().slice(5);
</code></pre>

<p>What am I doing wrong?</p>

<p><strong>EDIT</strong></p>

<p>Before more down-voting and general grumpy-ness occurs ...
I have to have the text from a div copied to a variable for manipulation and later display in a different window/div.
This happens in response to a button click. </p>

<p>...but applying the css rules sounds promising. Will try that instead.</p>

<p>Please see this fiddle to understand what I need to do:</p>

<p><a href="http://jsfiddle.net/Vsse3/2/" rel="nofollow">http://jsfiddle.net/Vsse3/2/</a></p>

<p>I have to be able to wrap column cells with a div before using the css idea. </p>
