如何实现基于元素宽度和内容的自动字体大小计算函数？

核心思路 #

要实现这个需求，核心是对比元素的可用宽度和内容在默认字体下的宽度，通过比例计算动态调整字体大小：

• 当内容宽度 ≤ 元素可用宽度时，保持默认字体大小
• 当内容宽度 > 元素可用宽度时，按「元素可用宽度 / 内容宽度」的比例缩小字体，让内容刚好适配元素宽度

具体实现代码 #

以下是针对单行文本场景的可复用JavaScript函数：

function autoAdjustFontSize(targetElement, defaultFontSize = '16px', minFontSize = '12px') {
  // 获取元素的可用内容宽度（排除padding和border）
  const elementWidth = targetElement.clientWidth;
  if (elementWidth === 0) return;

  // 创建隐藏参照物，计算内容在默认字体下的宽度
  const tempSpan = document.createElement('span');
  tempSpan.style.position = 'absolute';
  tempSpan.style.visibility = 'hidden';
  tempSpan.style.whiteSpace = 'nowrap';
  tempSpan.style.fontFamily = getComputedStyle(targetElement).fontFamily;
  tempSpan.style.fontSize = defaultFontSize;
  tempSpan.textContent = targetElement.textContent;
  
  document.body.appendChild(tempSpan);
  const contentWidth = tempSpan.offsetWidth;
  document.body.removeChild(tempSpan);

  // 计算并设置最终字体大小
  let fontSize = parseFloat(defaultFontSize);
  if (contentWidth > elementWidth) {
    const scaleRatio = elementWidth / contentWidth;
    fontSize = fontSize * scaleRatio;
    // 限制最小字体，避免过小无法阅读
    fontSize = Math.max(fontSize, parseFloat(minFontSize));
  }
  targetElement.style.fontSize = `${fontSize}px`;
}

使用示例 #

// 给id为"target"的元素执行适配
const target = document.getElementById('target');
autoAdjustFontSize(target, '18px', '14px');

// 监听窗口 resize，动态调整
window.addEventListener('resize', () => {
  autoAdjustFontSize(target, '18px', '14px');
});

注意事项 #

• 样式一致性：参照物的font-family、font-weight等样式要和目标元素保持一致，否则宽度计算会有偏差
• 多行文本处理：如果是多行内容，需改为对比元素高度和内容高度，同时设置white-space: normal并限制元素高度
• 性能优化：频繁触发resize时建议加防抖处理，避免重复计算
• 单位兼容：若默认字体用rem/em，需先用getComputedStyle转成px再计算

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