如何动态缩放文本以始终适配固定尺寸容器？

一、纯CSS方案：单行文本适配 #

因为容器固定为800px（等于100vw），可以结合视窗单位与clamp()函数动态控制字号，强制文本单行显示以保证完整适配：

.text-container {
  width: 100%; /* 对应800px屏幕宽度 */
  white-space: nowrap;
  overflow: hidden;
  font-size: clamp(60px, 32.5vw, 260px);
}

• 说明：clamp(60px, 32.5vw, 260px)中，32.5vw是动态基准值（800px的32.5%正好是260px，即你示例的最大字号）；当文本过长时，vw单位会自动缩小字号，直到达到最小限制60px。如果不需要单行，可去掉white-space: nowrap，但纯CSS多行适配精度有限，更推荐JS方案。

二、JavaScript方案：精准适配（支持单行/多行） #

利用Canvas的measureText()获取文本宽度，通过比例反推合适的字号，确保文本刚好填满容器宽度：

function fitTextToContainer(container) {
  const containerWidth = container.offsetWidth; // 固定为800px
  const text = container.textContent.trim();
  if (!text) return;

  // 创建临时Canvas测量文本
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // 基准字号用于初始测量
  const baseFontSize = 100;
  ctx.font = `${baseFontSize}px sans-serif`;
  const textWidthAtBase = ctx.measureText(text).width;

  // 按比例计算目标字号
  const targetFontSize = (containerWidth / textWidthAtBase) * baseFontSize;
  
  // 限制字号范围
  const minFontSize = 60;
  const maxFontSize = 260;
  const finalFontSize = Math.max(minFontSize, Math.min(maxFontSize, targetFontSize));

  container.style.fontSize = `${finalFontSize}px`;
}

// 初始化执行
const textContainer = document.querySelector('.text-container');
fitTextToContainer(textContainer);

// 文本动态更新时重新计算
// 示例：textContainer.textContent = '新的动态文本';
// fitTextToContainer(textContainer);

• 说明：通过基准字号下的文本宽度，算出容器宽度与文本宽度的比例，再乘以基准字号得到适配字号，同时设置最小/最大字号避免极端情况。如果需要多行适配，可扩展逻辑测量文本高度，结合容器高度调整字号。

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