如何使用JavaScript截取表格指定类列内容超出长度后添加省略号

实现逻辑 #

• 先设定内容长度阈值，超出该阈值的内容才会被截断加省略号
• 选中页面中所有匹配td.title的元素
• 遍历所有选中元素，对内容长度做判断处理，同时可将原始内容存入元素自定义属性，方便后续还原或调取使用

完整可运行代码 #

// 可自行调整最大允许显示的字符数
const MAX_CONTENT_LENGTH = 20;

// 获取所有类为title的td节点
const titleTdList = document.querySelectorAll('td.title');

titleTdList.forEach(item => {
  // 去除内容首尾空白
  const originalContent = item.textContent.trim();
  // 存储原始内容到自定义属性，避免后续无法找回完整内容
  item.dataset.fullContent = originalContent;
  
  // 长度超出阈值则处理
  if (originalContent.length > MAX_CONTENT_LENGTH) {
    item.textContent = `${originalContent.slice(0, MAX_CONTENT_LENGTH)}(...)`;
  }
})

补充说明 #

• 如果你的表格内容是动态渲染的，需要将上述代码放在表格内容插入到页面之后执行，避免获取不到元素
• 上述判断是按字符数统计，如果你需要按字节长度统计（比如一个中文字符算2个长度），可以自行修改长度判断逻辑
• 如果你需要鼠标悬浮显示完整内容，可以在处理内容的同时给元素加title属性：item.title = originalContent

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