如何仅用CSS让H1内文本字号动态填满容器宽度？

你需要H1文本自动调整字号以填满固定宽度的容器，同时高度自适应避免文本截断，以下是两种可行的解决方法：

方案一：CSS 固定文本适配（适合内容长度不变的场景） #

如果你的H1文本内容固定，可以通过字符数计算字号。比如文本「Title Of Thing」共13个字符（含空格），容器宽度设为200px，代码如下：

h1 {
  width: 200px;
  /* 用容器宽度除以字符数得到字号，确保文本填满宽度 */
  font-size: calc(200px / 13);
  /* 允许文本换行，高度随内容自动调整 */
  overflow-wrap: break-word;
  line-height: 1.2;
}

这种方式简单直接，但文本长度变化时需要手动修改计算值。

方案二：JavaScript 动态适配（通用场景） #

如果文本长度或容器宽度会动态变化，用JS可以自动计算合适的字号，确保文本始终填满容器：

基础CSS设置 #

h1 {
  width: 200px;
  overflow-wrap: break-word;
  line-height: 1.2;
  /* 初始设大字号，方便后续逐步缩小 */
  font-size: 100px;
}

适配逻辑代码 #

const adjustH1FontSize = () => {
  const h1 = document.querySelector('h1');
  if (!h1) return;

  const containerWidth = h1.offsetWidth;
  let fontSize = parseInt(window.getComputedStyle(h1).fontSize);

  // 逐步缩小字号，直到文本宽度不超过容器
  while (h1.scrollWidth > containerWidth && fontSize > 1) {
    fontSize--;
    h1.style.fontSize = `${fontSize}px`;
  }
};

// 页面加载时初始化
adjustH1FontSize();

// 监听窗口尺寸变化（若容器宽度随窗口调整）
window.addEventListener('resize', adjustH1FontSize);

// 若动态修改H1宽度，修改后调用 adjustH1FontSize() 即可触发适配

这个方法能自动适配任意文本长度和容器宽度，overflow-wrap: break-word会让文本自动换行，高度随内容自适应，避免截断。

补充说明：你提到的fit-content是让容器收缩适配文本，和需求相反；font-size: 100%是基于父元素或默认字号的比例，和容器宽度无关，所以都无法实现你的需求。

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