本文介绍一种轻量级 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 等装饰样式。

⚠️ 注意事项：

• 若元素含 transform、scale() 或 writing-mode 等复杂 CSS 属性，scrollWidth/Height 计算可能受影响，建议确保其渲染上下文干净；
• 频繁调用（如动画中）需加节流；生产环境建议搭配 requestIdleCallback 异步执行；
• 对于大量标题元素（>100），推荐分批处理或仅对可视区域内的元素启用检测。

总结：相比纯 CSS 媒体查询，该方案以极小的 JS 开销实现了“内容真实适配”，特别适合 CMS、卡片列表、仪表盘标题等动态文本场景。它不是替代响应式设计，而是对其的重要补充——让字体真正“读懂内容”。