5

I would like to trim a part of the <td> if it is too long. This will make sure the table doesn't get messed up. All the data in the following table is retrieved from a database. On the "Subject" part, how could I make the text shorten and put "..." if it goes over a certain character limit? Here is a screenshot of the table:

screenshot

As you can see if the subject gets too long it may mess up the table.

Is there any jQuery that will make the element trim only if it goes over a certain limit and put "..." at the end? I don't think a truncate plugin would work because it usually splits it up and makes a line break and I don't need it to show because all the person using this would have to do is click "View ticket" and they will see the full subject there.

I searched other questions on StackOverflow but I couldn't find one that is what I need.

Nathan
  • 11,814
  • 11
  • 50
  • 93

3 Answers3

8

You might be able to use the CSS text-overflow: ellipsis property.

According to this compatibility table, it is supported by all major browsers.

Based on this answer, it looks like you also need to define table-layout: fixed on the table, and overflow: hidden and white-space: nowrap on the cells. The fixed table layout will also require you to adjust your column widths explicitly.

Community
  • 1
  • 1
Stuart Cook
  • 3,994
  • 25
  • 23
  • It seems that the solution is not as simple as just adding `text-overflow` and `width`. Does anybody know how to get this approach to actually work? – Stuart Cook Sep 17 '11 at 07:12
  • But this doesn't add the ellipsis and I think using jQuery is easier as you don't have to add all the extra CSS. But thanks for answering, I never knew about the `text-overflow: ellipsis` until now. – Nathan Sep 17 '11 at 20:25
4

Here is a little snippet that I used to see if an artists name was over 33 characters

// Elipses 
$('.artistName').each(function() {
    var that = $(this),
        title = that.text(),
        chars = title.length;

    if (chars > 33) {
        var newTitle = title.substring(0, 30) + "...";
        that.text(newTitle);
    }
});

Just replace the .artistName selector with the one for your table cell and update the character counts to reflect what you want.

wesbos
  • 25,839
  • 30
  • 106
  • 143
  • It almost works, but it just adds the "..." after the text but doesn't trim it. I even set it to 5 to see and it didn't work. Maybe there is a little error? Thanks for your help! :) – Nathan Sep 17 '11 at 06:40
  • Do you have some example markup? If its adding the ..., it means its not getting the correct length of the cell contents. – wesbos Sep 17 '11 at 06:42
  • Here is one of the table row codes: http://dl.dropbox.com/u/25819920/my-code.txt The `td` with `class="shorten"` is the part that I am trying to shorten. Is that what you needed? – Nathan Sep 17 '11 at 06:46
  • Oh, thanks. Was the problem that I was not putting `td` in the selector? If you look at that file again, I added the JS I was using. Thanks so much! – Nathan Sep 17 '11 at 06:53
  • the problem was that you were saying IF LESS THAN 5, take chars 0 to 30. You forgot to update the second digit. – wesbos Sep 17 '11 at 06:54
  • Wow... I feel stupid, LOL. I just noticed I changed the number in the statement and not the substring. – Nathan Sep 17 '11 at 06:54
3

Here's a function that will respect word boundaries (it won't split a word in half).

var maxLength = 30;

$('.shorten').each(function() {
    var text = $(this).text();

    if (text.length > maxLength) {
        var output =/^.{0,30}(?=[\.,; ])\b/.exec(text)[0]
        $(this).text(output + "...");
    }     
});
Philip Ramirez
  • 2,972
  • 1
  • 16
  • 16