Question

I need to truncate the text in the first column of a table using javascript or jQuery. Here’s where I’m at:

The table:

<table id="bigTable">
    <tr><td>Text is tooooo looong</td><td>Just Right</td></tr>
    <tr><td>Text is tooooo looong</td><td>Just Right</td></tr>
    <tr><td>Text is tooooo looong</td><td>Just Right</td></tr>
</table>

Trying stuff like the following without success ( compiled from other similar posts ):

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

It does not seem to be getting the contents, or text from the cells. Has no effect whatsoever. Tried also –

$('td:eq(0)', newLbl)contents().slice(5);


$('td:eq(0)', newLbl).text().slice(5);

What am I doing wrong?

EDIT

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.

…but applying the css rules sounds promising. Will try that instead.

Please see this fiddle to understand what I need to do:

http://jsfiddle.net/Vsse3/2/

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

Answer 1

You don’t need js, using CSS:

demo:
http://jsfiddle.net/vTDAQ/3/

@elckarns comment is correct but you also need to wrap the cell content in a div to use text-overflow.

Also note that your table is not well formed.

demo updated as requested:
http://jsfiddle.net/Vsse3/6/