本文介绍一种轻量级 javascript 方案，用于实时检测 `.entry-title` 元素是否发生文本溢出，并在触发时自动缩小字体、恢复换行与溢出样式，兼顾多行文本兼容性与性能。
在响应式网页开发中，仅依赖 @media 查询（如按视口宽度缩放字体）虽简单高效，但无法应对内容长度动态变化的场景——例如用户编辑标题、cms 后台生成不同长度标题、或同一页面多个 .entry-title 元素因父容器宽度差异而产生不一致溢出行为。此时，需借助 javaScript 实现精准的“内容驱动型”字体适配。
以下是一个健壮、可复用的检测逻辑（支持单行与多行文本）：
function adjustFontSizeToFit(element, options = {}) { const { minFontSize = 0.8, // 最小缩放比例（相对于初始 font-size） step = 0.05, // 每次缩放步长 maxAttempts = 20, // 防止无限循环的最大尝试次数 restoreStyles = true // 是否还原 white-space/overflow 等样式（设为 false 可保留 ellipsis） } = options; const originalStyle = { fontSize: window.getComputedStyle(element).fontSize, whiteSpace: element.style.whiteSpace, overflow: element.style.overflow, textOverflow: element.style.textOverflow }; // 保存初始 fontSize（转为 px 值便于计算） const originalPx = parseFloat(originalStyle.fontSize); let currentSize = originalPx; let attempts = 0; // 检测是否溢出：对比 scrollWidth > clientWidth（单行）或 scrollHeight > clientHeight（多行） const isOverflowing = () => { return element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight; }; // 循环缩小字体直至不溢出或达到最小值 while (isOverflowing() && currentSize > originalPx * minFontSize && attempts < maxAttempts) { currentSize -= originalPx * step; element.style.fontSize = `${currentSize}px`; attempts++; } // 可选：还原原始溢出控制样式（如需保留省略号则跳过） if (restoreStyles) { element.style.whiteSpace = 'inherit'; element.style.overflow = 'inherit'; element.style.textOverflow = 'inherit'; } } // 使用示例：为所有 .entry-title 元素启用自适应 document.querySelectorAll('.entry-title').forEach(el => { // 初始调用 adjustFontSizeToFit(el, { minFontSize: 0.7, step: 0.03 }); // 可选：监听窗口 resize（防布局变动后再次溢出） const resizeObserver = new ResizeObserver(() => { // 重置为原始字体再重新适配（避免残留过小字号） el.style.fontSize = ''; adjustFontSizeToFit(el, { minFontSize: 0.7, step: 0.03 }); }); resizeObserver.observe(el); });✅ 关键优势说明：
- ✅ 支持单行 + 多行文本：同时检查 scrollWidth/clientWidth 和 scrollHeight/clientHeight；
- ✅ 无硬编码像素值：基于当前计算出的 fontSize 动态缩放，兼容 em、rem、px 等单位；
- ✅ 防死循环保护：通过 maxAttempts 和 minFontSize 避免过度缩小；
- ✅ 响应式友好：配合 ResizeObserver，自动响应容器尺寸变化（比 window.resize 更精准、高性能）；
- ✅ 样式可控：restoreStyles 参数允许灵活选择是否移除 text-overflow: ellipsis 等装饰样式。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 若元素含 transform、scale() 或 writing-mode 等复杂 css 属性，scrollWidth/Height 计算可能受影响，建议确保其渲染上下文干净；
- 频繁调用（如动画中）需加节流；生产环境建议搭配 requestIdleCallback 异步执行；
- 对于大量标题元素（>100），推荐分批处理或仅对可视区域内的元素启用检测。
总结：相比纯 CSS 媒体查询，该方案以极小的 js 开销实现了“内容真实适配”，特别适合 CMS、卡片列表、仪表盘标题等动态文本场景。它不是替代响应式设计，而是对其的重要补充——让字体真正“读懂内容”。