7

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

user000001
  • 32,226
  • 12
  • 81
  • 108
Marius
  • 219
  • 1
  • 3
  • 11
  • 1
    If it were me, I'd much prefer to do this on the server, unless the data is being fetched from a JSON API or something. (Even then it might be nice for the server to do it; depends on the semantics I guess.) – Pointy Mar 30 '10 at 16:42
  • I thought about this, however; I wouldnt know the width of the text in px, and would have to leave a room for variable fonts etc for each user. – Marius Mar 30 '10 at 16:48
  • I really like [jQuery.dotdotdot](http://dotdotdot.frebsite.nl/). – Mitar Jan 12 '13 at 13:45
  • 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 – chefsmart Jul 27 '10 at 16:29
  • Here is a good SO post on getting text width. Check it out: http://stackoverflow.com/questions/1582534/calculating-text-width-with-jquery – Dustin Laine Mar 30 '10 at 16:43
  • Is it possible to break the text only after a whole word? – heinkasner Feb 13 '15 at 11:41

3 Answers3

8

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/ (archived)

Eduard Florinescu
  • 16,747
  • 28
  • 113
  • 179
James Westgate
  • 11,306
  • 8
  • 61
  • 68
6

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

mcgrailm
  • 17,469
  • 22
  • 83
  • 129
  • How do I find calculate how wide each letter is to determine substring second argument? Thanks – Marius Mar 30 '10 at 16:57
5

Use my jQuery plugin: jQuery-Shorten. It handles all the cases, makes use of text-overflow:ellipsis if available and it's very fast.

Download: github.com/MarcDiethelm/jQuery-Shorten

Demo & Doc: http://web5.me/jquery/plugins/shorten/shorten.doc.html

You can configure how the text ends (ellipsis). The default is a three-dot char ("…", …, Unicode: 2026) but you can use anything you want, including markup.

The text width of the 'selected' element (eg. span or div) is measured using Canvas or by placing it inside a temporary table cell and shortened (initially using an educated guess for efficiency) and measured again until it (and the appended ellipsis or text) fits inside the block. A tooltip on the 'selected' element displays the full original text.

T. Junghans
  • 11,385
  • 7
  • 52
  • 75
Marc Diethelm
  • 1,182
  • 1
  • 11
  • 15
  • 1
    Nice plugin. I think it is worth mentioning that it carries a GPL 3.0 license, which may not fit with everyone's needs. – Robert Munn Apr 13 '15 at 11:05