如何实现表格单元格文本自适应宽度中间加省略号且无字符裁剪

字符裁剪问题根因 #

你遇到的调整窗口时字符被裁剪的问题，基本来自三个常见实现错误：

• 表格未设置table-layout: fixed，单元格实际宽度会随内容动态变化，和截断计算时的参考宽度不一致
• 用了固定的首尾字符数硬编码，没有适配不同宽度下的实际可容纳字符数
• 计算字符宽度时用了固定估算值，没有考虑字体、字号、字间距的实际渲染宽度，导致拼接后的截断文本宽度超过容器宽度

推荐实现方案 #

如果要实现首尾字符数随容器宽度自适应、无裁剪的中间截断效果，优先选择JS动态计算方案，兼容性和适配效果都优于纯CSS方案，核心实现逻辑如下：

前置样式配置 #

首先给表格和单元格加基础样式，固定布局避免宽度跳动：

table {
  table-layout: fixed;
  width: 100%;
}
td.truncate {
  white-space: nowrap;
  overflow: hidden;
  padding: 8px;
}

核心JS逻辑 #

用ResizeObserver监听容器尺寸变化，配合隐藏节点测量文本实际渲染宽度，动态调整前后保留的字符数，完全避免裁剪：

// 全局复用的文本宽度测量节点
const measureSpan = document.createElement('span')
measureSpan.style.visibility = 'hidden'
measureSpan.style.position = 'absolute'
measureSpan.style.whiteSpace = 'nowrap'
document.body.appendChild(measureSpan)

/**
 * 文本中间截断方法
 * @param {HTMLElement} el 要渲染截断文本的容器节点
 * @param {string} originText 原始完整文本
 */
function truncateMiddle(el, originText) {
  const containerWidth = el.clientWidth
  // 同步测量节点和目标节点的字体样式，保证宽度计算准确
  measureSpan.style.font = getComputedStyle(el).font

  // 计算省略号占的宽度
  measureSpan.textContent = '...'
  const ellipsisWidth = measureSpan.offsetWidth

  // 原始文本宽度小于容器，直接展示完整文本
  measureSpan.textContent = originText
  if (measureSpan.offsetWidth <= containerWidth) {
    el.textContent = originText
    return
  }

  // 二分法查找最大可保留的前后字符数，效率远高于逐字符测试
  let start = 0, end = Math.floor(originText.length / 2), bestCharCount = 0
  while (start <= end) {
    const mid = Math.floor((start + end) / 2)
    const testStr = originText.slice(0, mid) + '...' + originText.slice(-mid)
    measureSpan.textContent = testStr
    if (measureSpan.offsetWidth <= containerWidth) {
      bestCharCount = mid
      start = mid + 1
    } else {
      end = mid - 1
    }
  }

  el.textContent = bestCharCount === 0 ? '...' : `${originText.slice(0, bestCharCount)}...${originText.slice(-bestCharCount)}`
}

// 监听所有需要截断的单元格尺寸变化
const truncateObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    // 首次调用时缓存原始文本，避免截断后丢失原始内容
    if (!entry.target.dataset.originText) {
      entry.target.dataset.originText = entry.target.textContent.trim()
    }
    truncateMiddle(entry.target, entry.target.dataset.originText)
  })
})

// 绑定需要截断的单元格，给需要截断的单元格加truncate类即可
document.querySelectorAll('td.truncate').forEach(td => truncateObserver.observe(td))

优化注意事项 #

• 如果页面存在大量需要截断的单元格，可以给truncateMiddle方法加100-200ms的防抖，避免窗口调整时频繁计算导致性能损耗
• 如果是数字或等宽字体场景，可以简化宽度计算逻辑，直接按字符数估算，非等宽字体必须用测量节点计算宽度才能避免裁剪
• 避免在单元格内加额外的边距、内边距之外的装饰元素，否则会影响容器可用宽度的计算准确性

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