嘿，这个需求我之前做项目的时候刚好遇到过，整理了几种实用的实现方式，你可以根据自己的场景来选：

方案1：纯CSS近似实现（适合简单文本场景） #

纯CSS没法直接获取内容的字符数，但可以结合CSS变量和clamp()函数做近似的自适应效果——前提是你用JS给每个单元格传入字符数的变量（毕竟CSS拿不到内容长度）。

首先给表格和单元格设置固定尺寸，再用clamp()限定字体的范围，根据字符数动态调整：

/* 固定表格布局，确保单元格尺寸不被内容撑开 */
.fixed-table {
  width: 400px;
  table-layout: fixed;
  border-collapse: collapse;
}

.fixed-table td {
  width: 100px;
  height: 80px;
  border: 1px solid #ddd;
  padding: 4px;
  overflow-wrap: break-word; /* 超长内容自动换行 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 核心：用clamp设置字体范围，结合自定义变量--char-count计算 */
  font-size: clamp(12px, calc(24px - (var(--char-count) * 0.7px)), 24px);
}

然后用一行简单的JS给每个单元格设置字符数变量：

document.querySelectorAll('.fixed-table td').forEach(cell => {
  const charCount = cell.textContent.trim().replace(/\s+/g, '').length;
  cell.style.setProperty('--char-count', charCount);
});

这种方式优点是轻量，但因为是线性计算，对不同宽度的字符（比如中文和英文）适配性一般，适合内容字符宽度差异不大的场景。

方案2：JavaScript精确控制（推荐，适配复杂内容） #

如果想要更精准的效果（比如考虑不同字符的实际渲染宽度），可以用JS动态测试文本在单元格内的适配情况，逐步调整字体大小：

// 先配置好固定参数，和CSS里的单元格尺寸对应
const adaptConfig = {
  maxFont: 24,   // 最大字体（px）
  minFont: 12,   // 最小字体（px）
  cellPadding: 8 // 单元格padding的总宽度（左右各4px）
};

// 获取所有需要处理的单元格
const tableCells = document.querySelectorAll('.fixed-table td');

tableCells.forEach(cell => {
  const text = cell.textContent.trim();
  if (!text) return; // 空单元格跳过

  // 创建临时元素测试文本渲染尺寸
  const tempText = document.createElement('span');
  tempText.textContent = text;
  tempText.style.position = 'absolute';
  tempText.style.visibility = 'hidden';
  document.body.appendChild(tempText);

  // 从最大字体开始往下试，直到文本能放进单元格
  let finalFontSize = adaptConfig.minFont;
  const cellWidth = cell.offsetWidth - adaptConfig.cellPadding;
  const cellHeight = cell.offsetHeight - adaptConfig.cellPadding;

  for (let size = adaptConfig.maxFont; size >= adaptConfig.minFont; size--) {
    tempText.style.fontSize = `${size}px`;
    if (tempText.offsetWidth <= cellWidth && tempText.offsetHeight <= cellHeight) {
      finalFontSize = size;
      break;
    }
  }

  // 给单元格设置最终字体大小
  cell.style.fontSize = `${finalFontSize}px`;
  document.body.removeChild(tempText);
});

// 可选：监听窗口 resize，表格尺寸变化时重新计算
window.addEventListener('resize', () => {
  // 重新执行上面的适配逻辑
});

这种方式会实际模拟文本的渲染尺寸，不管是中文、英文还是混合内容，都能精准适配单元格大小，效果更可靠。

几个关键注意事项 #

• 一定要给表格设置table-layout: fixed，否则单元格会被内容撑开，固定尺寸就失效了
• 处理空单元格时要跳过，避免出现超大字体的情况
• 如果单元格里有图片、图标等非文本元素，需要调整JS逻辑，只针对文本部分计算

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