如何设置h1字体大小使其不溢出容器，仅在溢出时调整字号？

针对长单词H1溢出容器的问题，这里提供两种解决方案，分别是纯CSS的近似适配和JS的精准适配：

纯CSS方案（快速实现，无需JS） #

这种方案基于容器宽度比例自动调整字号，默认保持64px，在容器变窄时按比例缩小，确保内容不溢出：

section {
  max-width: 736px;
  width: 100%;
  padding: 0 16px; /* 可选，避免内容贴容器边缘 */
}

h1 {
  white-space: nowrap; /* 强制单词不换行 */
  font-size: clamp(24px, calc(64px * ((100vw - 32px) / 736px)), 64px);
  /* 解释：
     - clamp()的三个值分别是最小字号、动态计算值、最大字号
     - 100vw - 32px 是去除section左右padding后的实际可用宽度
     - 当视口宽度等于736px时，计算值等于64px，使用默认字号
     - 视口变窄时，字号按比例缩小，最长单词会适配容器宽度
  */
}

如果你的section没有padding，可以简化为：

h1 {
  white-space: nowrap;
  font-size: clamp(24px, calc(64px * (100vw / 736px)), 64px);
}

JS精准适配方案（仅在内容溢出时调整） #

如果需要严格做到「只有当内容实际溢出容器时才缩小字号」，纯CSS无法直接实现，需要借助JS动态计算：

/* 基础样式 */
section {
  max-width: 736px;
  width: 100%;
  padding: 0 16px;
}

h1 {
  white-space: nowrap;
  font-size: 64px; /* 默认字号 */
}

// 遍历所有目标H1元素
document.querySelectorAll('h1').forEach(h1 => {
  const container = h1.parentElement;
  let currentFontSize = 64;
  const minFontSize = 24; // 可自定义最小字号

  // 检查并调整字号的函数
  const adjustFontSize = () => {
    // 重置字号为当前值，避免缓存影响
    h1.style.fontSize = `${currentFontSize}px`;
    
    // 如果溢出且未达最小字号，继续缩小
    if (h1.offsetWidth > container.offsetWidth && currentFontSize > minFontSize) {
      currentFontSize--;
      adjustFontSize();
    } 
    // 如果容器还有空间且未达默认字号，尝试放大（针对短单词）
    else if (h1.offsetWidth < container.offsetWidth && currentFontSize < 64) {
      currentFontSize++;
      adjustFontSize();
    }
  };

  // 初始化调整
  adjustFontSize();
  // 监听窗口 resize，确保响应式适配
  window.addEventListener('resize', adjustFontSize);
});

这个JS方案会动态计算H1的实际宽度，与容器宽度对比，逐步调整字号到刚好不溢出的最大值，同时保留默认64px的上限和自定义的下限。

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