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.

Answers:

Answer

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.

Answer

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.

Answer

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.