I want to appends ellipsis (…) to the end of row of datatable(in this comment column). For this I have added jQuery ellipsis js. how should I specify height to jQuery data table row so that it only show 2 line. Right now height is adjusted according to length of text.

This is my jQuery table

<div id="comments">
 <c:choose>
 <c:when test="${null ne comments and not empty comments}">
  <table id="dataTable2" cellpadding="0" cellspacing="0" border="0" class="display" style="width:100%;">
    <thead><tr><th>Id</th>
        <th width="15%">User</th> 
        <th width="15%">Role</th>       
        <th width="45%">Comment</th></tr></thead>
    <tbody>
        <c:forEach items="${comm}" var="comm" varStatus="status">
            <tr><td>${commentmentId}</td>
            <td width="15%">${comm.userFullName}</td>
            <td width="15%">${comm.userRoleName}</td>
            <td width="45%" style="height:20px" class="ellipsis multiline">${comm.CommentAbbreviation}</td></tr>
        </c:forEach>
    </tbody>
  </table>
 </c:when></c:choose>
</div>

jquery.autoellipsis.js

(function($) {
$.fn.ellipsis = function()
{
    return this.each(function()
    {
    var el = $(this);

        if(el.css("overflow") == "hidden")
        {
        var text = el.html();
        var multiline = el.hasClass('multiline');
        var t = $(this.cloneNode(true))
                .hide()
                .css('position', 'absolute')
                .css('overflow', 'visible')
                .width(multiline ? el.width() : 'auto')
                .height(multiline ? 'auto' : el.height());

el.after(t);

function height() { return t.height() > el.height(); };
function width() { return t.width() > el.width(); };

var func = multiline ? height : width;

while (text.length > 0 && func())
{
        text = text.substr(0, text.length - 1);
        t.html(text + "...");
}

el.html(t.html());
t.remove();
            }
        });
};
})(jQuery);

css class

.ellipsis {
        white-space: nowrap;
        overflow: hidden;
}

.ellipsis.multiline {
        white-space: normal;
}

How should I set height to datatable row ?

I want to appends ellipsis (…) to the end of row of datatable(in this comment column). For this I have added jQuery ellipsis js. how should I specify height to jQuery data table row so that it only show 2 line. Right now height is adjusted according to length of text.

This is my jQuery table

<div id="comments">
 <c:choose>
 <c:when test="${null ne comments and not empty comments}">
  <table id="dataTable2" cellpadding="0" cellspacing="0" border="0" class="display" style="width:100%;">
    <thead><tr><th>Id</th>
        <th width="15%">User</th> 
        <th width="15%">Role</th>       
        <th width="45%">Comment</th></tr></thead>
    <tbody>
        <c:forEach items="${comm}" var="comm" varStatus="status">
            <tr><td>${comment.commentId}</td>
            <td width="15%">${comm.userFullName}</td>
            <td width="15%">${comm.userRoleName}</td>
            <td width="45%" style="height:20px" class="ellipsis multiline">${comm.CommentAbbreviation}</td></tr>
        </c:forEach>
    </tbody>
  </table>
 </c:when></c:choose>
</div>

jquery.autoellipsis.js

(function($) {
$.fn.ellipsis = function()
{
    return this.each(function()
    {
    var el = $(this);

        if(el.css("overflow") == "hidden")
        {
        var text = el.html();
        var multiline = el.hasClass('multiline');
        var t = $(this.cloneNode(true))
                .hide()
                .css('position', 'absolute')
                .css('overflow', 'visible')
                .width(multiline ? el.width() : 'auto')
                .height(multiline ? 'auto' : el.height());

el.after(t);

function height() { return t.height() > el.height(); };
function width() { return t.width() > el.width(); };

var func = multiline ? height : width;

while (text.length > 0 && func())
{
        text = text.substr(0, text.length - 1);
        t.html(text + "...");
}

el.html(t.html());
t.remove();
            }
        });
};
})(jQuery);

css class

.ellipsis {
        white-space: nowrap;
        overflow: hidden;
}

.ellipsis.multiline {
        white-space: normal;
}

How should I set height to datatable row ?

• javascript
• jquery
• jquery-ui
• datatables

3 Answers 3

This worked great for me

.dataTable th, .dataTable td {
max-width: 200px;
min-width: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

I found a solution. It isn't the most correct way but it works. I wrapped the data within the in a div and I have modified following line.

<td width="45%" style="height:20px" class="ellipsis multiline">${comm.CommentAbbreviation}</td>

Replace by

<td width="45%"><div class="ellipsis multiline" style="height: 35px;">${comm.CommentAbbreviation}</div></td>

It works for me

.td-limit {
    max-width: 70px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}