1

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
RobJSchultz
  • 47
  • 1
  • 6
  • Do you just want to truncate the text at a certain character count without a readmore button? – Ohgodwhy Jul 20 '12 at 14:44
  • @Ohgodwhy That could work, provided it still wraps however many lines to fill the specified height of the TD element. – RobJSchultz Jul 20 '12 at 14:51
  • 1
    [Does this emulate the intended functionality?](http://jsfiddle.net/Ohgodwhy/Bk5Uq/), [Or maybe you want to have vastly more characters allowed?](http://jsfiddle.net/Ohgodwhy/Bk5Uq/1/) – Ohgodwhy Jul 20 '12 at 14:58
  • This might just do the trick! – RobJSchultz Jul 20 '12 at 15:03
  • @Ohgodwhy Hm, except that it seems to be appending the ellipsis to every TD, including empty ones. – RobJSchultz Jul 20 '12 at 15:12
  • Sorry, I just took a guess at your needs. Can you tell me what the relationship should be? do you just want to avoid empty TD's? – Ohgodwhy Jul 20 '12 at 15:14
  • Thus far, it looks like it'll do what I'm looking for. If it could skip empty cells and cells that are already < the max number of characters, it'd be prefect! – RobJSchultz Jul 20 '12 at 15:20

3 Answers3

4

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

Ohgodwhy
  • 49,779
  • 11
  • 80
  • 110
  • 3
    You'd want var trimmed = str.substr(0, maxChars - 2); to keep it at 210 chars wouldn't you? – CraftyFella Jul 20 '12 at 15:32
  • Looks good! I am immensely thankful for your help. Thanks again! – RobJSchultz Jul 20 '12 at 15:33
  • +1 I like the length of string usage to specify when the ellipsis should be added rather than a set with of the td. – Mr. Mr. Jul 20 '12 at 15:34
  • 1
    @CraftyFella you're completely right. I had gone devoid of thought, thank you. :) – Ohgodwhy Jul 20 '12 at 15:49
  • I know this is an old question, but I came across this issue recently. My issue is that I'm using this in a table with pagination - on initial page load, everything works great. But if I "paginate" to the next set of results the max character styling with "..." goes away. – Michael Feb 16 '14 at 17:21
  • @Michael The issue is that JavaScript doesn't inherently observe changes to the document. This would require either a Mutation Observer, or to put that method into the a function and call the function after the pagination completes (which I assume is an AJAX driven response) – Ohgodwhy Feb 16 '14 at 22:32
1

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.

Mr. Mr.
  • 4,257
  • 3
  • 27
  • 42
  • Ahhh I have re-read your question and see you want ellipsis to be applied more intelligently. I will leave my answer so that the basic css can be seen but I can see it is not skipping the td as in Ohgodwhy's answer and ellipsis are added indiscriminately rather than after the first line or to a set length of chars. – Mr. Mr. Jul 20 '12 at 15:33
0

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/

Jason Nance
  • 93
  • 1
  • 2
  • 5