javascript 如何将 jQuery 省略号应用于 jQuery 数据表行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8940987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply jQuery ellipsis to jQuery datatable row
提问by Raje
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.
我想将省略号 (...) 附加到数据表行的末尾（在此注释列中）。为此，我添加了 jQuery 省略号 js。我应该如何指定 jQuery 数据表行的高度，以便它只显示 2 行。现在高度根据文本长度调整。
This is my jQuery table
这是我的 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
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
css类
.ellipsis {
white-space: nowrap;
overflow: hidden;
}
.ellipsis.multiline {
white-space: normal;
}
How should I set height to datatable row ?
我应该如何将高度设置为数据表行？
采纳答案by Raje
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.
我找到了解决办法。这不是最正确的方法，但它有效。我将数据包裹在 div 中，并修改了以下行。
<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>
回答by segFault
This worked great for me
这对我很有用
.dataTable th, .dataTable td {
max-width: 200px;
min-width: 70px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
回答by Mukesh Salaria
It works for me
这个对我有用
.td-limit {
max-width: 70px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
