表格单元格内容过长时无法用css自动缩小字体，因浏览器默认让内容撑开单元格而非压缩文字，且css缺乏感知内容长度的机制；必须用javascript检测scrollwidth与clientwidth差值，递归缩小字号并同步调整line-height和最小字号限制。
表格单元格内容过长时，不能靠 CSS 自动缩小字体——font-size 没有“自动响应溢出”的原生机制，必须用 JavaScript 主动检测并调整。
为什么 table td 不会自动缩字体？
浏览器对 td 的默认行为是：内容撑开单元格，而不是压缩文字。CSS 的 overflow: hidden 或 text-overflow: ellipsis 只能截断，不改变字号；font-size: clamp() 无法感知内容长度，只响应视口宽度。
-
white-space: nowrap+overflow: hidden会隐藏多余文字，但用户看不到全貌 -
vw单位会让字体随屏幕缩放，但和单元格内容长度无关 - 纯 CSS 无办法读取
scrollWidth和clientWidth做比较，这是 JS 的职责
用 JS 检测溢出并缩小字体（核心逻辑）
关键不是“一上来就缩小”，而是先判断是否溢出：获取单元格的 scrollWidth（实际内容宽度）和 clientWidth（可视宽度），差值大于几像素就触发缩小。
- 对每个
td或th执行el.scrollWidth > el.clientWidth + 2判断 - 每次缩小步进建议用
0.9倍（如从16px→14.4px），避免一步过小 - 设最小字号限制（如
10px），防止缩到不可读 - 必须重置
line-height和padding，否则行高错位、内边距撑开
示例代码（仅处理当前页面所有 td）：
document.querySelectorAll('td, th').forEach(cell => {
const originalSize = parseFloat(getComputedStyle(cell).fontSize) || 16;
let currentSize = originalSize;
<p>const shrinkIfNeeded = () => {
if (cell.scrollWidth = 0.9;
if (currentSize 1.2) + 'px'; // 同步调行高
requestAnimationFrame(shrinkIfNeeded); // 防抖+递归
};</p><p>shrinkIfNeeded();
});</p>
表格重绘后需重新运行（容易漏掉的点）
表格内容是动态加载、AJAX 渲染、或 Vue/React 更新的，JS 初始化时查不到新 td，也不会监听 DOM 变化。
- 不要只在
DOMContentLoaded里跑一次，得封装成可复用函数 - 若用框架，应在数据更新后手动调用，比如 Vue 的
nextTick后执行 - 监听
MutationObserver成本高，不如明确在数据渲染完成回调里触发 - 注意
display: none的表格或折叠行，其scrollWidth返回 0，需确保元素已渲染且可见
最常被忽略的是：缩字体后没同步改 line-height 和 vertical-align，导致文字贴顶或下沉；还有没设最小字号下限，某些超长 ID 或 Base64 字符串直接缩到 4px，变成一条线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
