How to trim content of element and put “…” if the characters go over a certain limit?

Question

I would like to trim a part of the if it is too long. This will make sure the table doesn\'t get messed up. All the data in the following table is re

Answer 1

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 2

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

Answer 3

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.