0

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.

Bubnoff
  • 3,917
  • 3
  • 30
  • 33
  • 4
    You could do this with just css `overflow: hidden` and `text-overflow: ellipsis`. Try it out see if it works... – elclanrs Aug 11 '12 at 00:12
  • This code is awful. Also, it's already been asked here: http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide – WhyNotHugo Aug 11 '12 at 00:12
  • It might help if you made a jsfiddle – Aaron Kurtzhals Aug 11 '12 at 00:13
  • It has to truncate the text after a button is clicked. But maybe I could apply the css styles via jQuery after that. Yes, the code is awful ...you know, uh ...advice is usually welcome. I suck at javascript. – Bubnoff Aug 11 '12 at 00:15

1 Answers1

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/

Peter
  • 5,138
  • 5
  • 29
  • 38