如何将 jQuery 省略号应用于 jQuery 数据表行

Question

我想将省略号（...）附加到数据表行的末尾（在此注释列中）。为此，我添加了 jQuery ellipsis js。我应该如何指定 jQuery 数据表行的高度，以便它只显示 2 行。现在高度根据文本长度进行调整。

这是我的 jQuery 表

<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 类

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

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

我应该如何设置数据表行的高度？

Answer 1

这对我很有用

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

Answer 2

我找到了解决方案。这不是最正确的方法，但它有效。我将数据包装在 div 中，并修改了以下行。

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

替换为

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

Answer 3

这对我有用

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