Question

I have a table that has 100% width. It is generated dynamically with values from my db. I need to truncate TH values if they do not fit in the table, without pushing the boundaries of the cell. If the value is truncated I’d like to add a link with … and put the full length label into title tag. I don’t need it to expand. Something like this:

<th>
   Long label<a href="javascript:void(0)" title="$myFullValue">...</a>
</th>

I’m not sure how to get the value of the string…

$("TH").width();
$("TH").val().width(); ??

I know there are some jQuery plugins out there but I was not able to find what I need and I thought I could try and give this project my own whirl.

http://jsfiddle.net/b3cQZ/3/

---

EDIT:

Just an idea that crossed my mind. Couldn’t I wrap the label in tags and get it’s width. At the same time get the width of the parent TH. If labe’s width is greater, I could

1. subtract, say 20 px (for …) from TH width and,
2. assign that width to span’s width
3. while adding overflow:hidden, and
4. appending “…” to the span

Won’t this work?

Answer 1

This solution uses a fixed value but if you’re able to find a way to calculate the maxLength you could wrap this in a function and pass it the output as the maxLength.

FIDDLE http://jsfiddle.net/m72Ja/2/

HTML

<table class="MyTable" border="1" width="400">
    <thead>
        <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Long Long Long Col 3</th>
            <th>Col 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>

JS

$(document).ready(function() {
    $('.MyTable th').each(function() {
        var maxLength = 10;
        //if the value is greater than max length,      
        //cut the string to max length then add ...     
        if ($(this).text().length > maxLength) {
            $(this).text($(this).text().substring(0, maxLength));
            $(this).append($("<a href='javascript:void(0);' title='$myFullValue'>...</a>"));
        }
    });
});