jQuery: shorten string length to fit a set width.

Question

Hello there,

I have a table, and in each cell I want to place strings, but they are much wider than the cell width. To prevent line break, I would like to shorten the strings to fit the cell, and append '...' at end to indicate that the string is much longer.

The table has about 40 rows and has to be done to each cell, so its important that its a quick. Should I use JS/jQuery for this?

How would I do it?

Thank you for your time.

Kind regards,
Marius

Answer 1

Here is a good SO post on getting text width. Check it out: http://stackoverflow.com/questions/1582534/calculating-text-width-with-jquery

Answer 2

this should do the trick where 8 is is the the size of the text you want to keep

 $('td').each(function(){
    $(this).text($(this).text().substring(0,8)+"...");
 });

to answer you comment I think jquery width() should help get you going but I think your headed up a slippery slop you should consider something different like putting the text in a div or using flexigrid or jgrid

Answer 3

You can use CSS -- text-overflow: ellipsis -- for this - with some caveats for certain browsers and workarounds listed here:

http://mattsnider.com/css/css-string-truncation-with-ellipsis/

Answer 4

See if these help you:

http://papermashup.com/truncate-text-with-the-jtruncate-jquery-plugin/

http://plugins.jquery.com/taxonomy/term/1175

http://plugins.jquery.com/taxonomy/term/4251