如何使用DataTable对HTML表格单元格内容进行截断并添加省略号？

问题根因 #

你的配置结构存在错误：targets 和 render 属于列级配置属性，必须嵌套在 columnDefs 配置数组中，直接写在 DataTable 初始化的顶级配置项里不会被识别，因此截断逻辑没有生效。

修复方案 #

方案1：JS逻辑截断（固定字符数）

修改后的初始化代码如下：

function strtrunc(str, max, add) {
  add = add || '...';
  return (typeof str === 'string' && str.length > max ? str.substring(0, max) + add : str);
};

$(document).ready(function() {
  $('#example').DataTable({
    "scrollX": true,
    // 列配置必须包裹在columnDefs中
    columnDefs: [{
      targets: '_all', // 匹配所有列，无需手动填写列索引
      render: function(data, type, full, meta) {
        if (type === 'display') {
          // 提取单元格纯文本，避免截断HTML标签导致页面异常
          const pureText = $('<div>').html(data).text();
          // 如果需要保留原有标签（比如第一列的链接属性），可以用下方注释的逻辑
          // if (pureText.length > 10) {
          //   const $temp = $('<div>').html(data);
          //   $temp.text(strtrunc(pureText, 10));
          //   return $temp.html();
          // }
          // return data;
          return strtrunc(pureText, 10);
        }
        return data;
      }
    }]
  });
});

方案2：CSS截断+悬浮 tooltip（固定列宽，更推荐）

这种方案不会修改原始数据，且适配响应式场景，体验更好：

1. CSS样式：

#example td {
  max-width: 120px; /* 可根据需求调整单格最大宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2. 补充悬浮显示完整内容的JS逻辑：

$(document).ready(function() {
  const table = $('#example').DataTable({
    "scrollX": true
  });
  // 鼠标悬浮显示完整内容
  $('#example').on('mouseenter', 'td', function() {
    $(this).attr('title', $(this).text());
  });
});

两种方案任选其一即可实现表格内容截断效果。

内容的提问来源于stack exchange，提问作者Ayrton Bourn