如果字符超过一定限度,如何修剪元素的内容并放"..."？

Question

<td>如果它太长,我想修剪一部分.这将确保表格不会搞砸.从数据库中检索下表中的所有数据.在"主题"部分,如果文字超过某个字符限制,我怎么能缩短文字并加上"......"？以下是该表的屏幕截图:

正如您所看到的那样,如果主题过长,可能会使表格陷入困境.

是否有任何jQuery只有在超过一定限度并在结尾处放置"......"时才会修剪元素？我不认为一个截断插件会工作,因为它通常会把它,使断行,我并不需要它表明,因为所有使用该会做的人是点击"查看票",他们会看到那里有完整的主题.

我在StackOverflow上搜索了其他问题,但我找不到我需要的东西.

Answer 1

您可以使用CSS text-overflow: ellipsis属性.

根据此兼容性表,所有主流浏览器都支持它.

基于这个答案,它看起来像你还需要定义table-layout: fixed的表,overflow: hidden并white-space: nowrap在细胞上.固定表格布局还需要您明确调整列宽.

Answer 2

这是我用来查看艺术家姓名是否超过 33 个字符的小片段

// Elipses 
$('.artistName').each(function() {
    var that = $(this),
        title = that.text(),
        chars = title.length;

    if (chars > 33) {
        var newTitle = title.substring(0, 30) + "...";
        that.text(newTitle);
    }
});

只需将 .artistName 选择器替换为表格单元格的选择器，然后更新字符计数以反映您想要的内容。