CODEWITHSUNDEEP
jqueryhtml-table
RobJSchultz
RobJSchultz

Reputation: 47

jQuery and dotdotdot for Truncating Table Cells

I know very little about Javascript and jQuery, and I'm attempting to use jQuery and the dotdotdot plugin to truncate TDs in a table after the second wrapped line.

I figure I'll never learn without asking;

A. Is this even possible?

B. How would I achieve this with dotdotdot -or- is there a better way?

The image in this other question (Cross-browser multi-line text overflow with ellipsis appended within a width and height fixed `<div>`) is exactly what I want to happen, but I can't figure out how to adapt it for use in table cells. Without knowing Javascript, jQuery seemed the best suited to do what I had in mind.

Upvotes: 1

Views: 3450

Answers (3)

Jason Nance
Jason Nance

Reputation: 93

dotdotdot does not work properly when called directly on a td element. You have to create a div inside the td element, put your content in the div, specify a max width/height for the td element, and call dotdotdot on the div.

<table>
<tr>
    <th>Short Column</th>
    <th>Long Column</th>
</tr>
<tr>
    <td>Some info</td>
    <td height=50px width=50px>
        <div id='long-column'><p>This is a long column that should be truncated by the dotdotdot plugin.</p></div>
    </td>
</tr>
</table>

<script type=text/javascript>
    $(document).ready(function () {
        $('#long-column').dotdotdot({});
    });
</script>

See this fiddle for a working example:

https://jsfiddle.net/q3wdqtw5/

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50787

Here you go, skips empty cells, doesn't apply to cells with less than the defined max char count.

$(function(){
  $.each($('td').not(':empty'), function(i,v){
    var count = parseInt($(v).text().length);
    var maxChars = 210;
    if(count > maxChars){
      var str = $(v).text();
      var trimmed = str.substr(0, maxChars - 2);
      $(v).text(trimmed + '...');          
    }  
  });
});

+1 for CraftyFella's comment

Here's the working jsFiddle

Upvotes: 4

Mr. Mr.
Mr. Mr.

Reputation: 4285

Can you check this jsFiddle out, it does not use jQuery because from what I understand from your question you need to know how to make the ellipsis, which is do-able with css rather than needing jQuery.

http://jsfiddle.net/xjLA7/1/

if you need it to be done via a script please tell me how you want this achieved and I will play a little more, but I hope this is what you need to make your td's overflow with the ellipsis rather than extending the td.

Here is my source:

<!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
td.test div
{
    white-space: nowrap;
    width: 70px;
    overflow: hidden;
    border: 1px solid #000000;
    text-overflow: ellipsis;
}
</style>
</head>
<body>

<table>
    <tr>
        <td class="test">
            <div>This is some long text that will not fit in the box</div>
        </td>
    </tr>
    </table>
</body>
</html>​

Regards.

Upvotes: 1

Related Questions