CODEWITHSUNDEEP
javascriptjquery
Nathan
Nathan

Reputation: 12010

How to trim content of element and put "..." if the characters go over a certain limit?

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.

Upvotes: 5

Views: 2011

Answers (3)

Stuart Cook
Stuart Cook

Reputation: 4014

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.

Upvotes: 8

Philip Ramirez
Philip Ramirez

Reputation: 2972

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 + "...");
    }     
});

Upvotes: 3

wesbos
wesbos

Reputation: 26317

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.

Upvotes: 4

Related Questions