如何在HTML与CSS中调整文字宽高使其适配容器

方案1：纯CSS实现（优先推荐，兼容性好） #

无需修改你现有HTML结构，直接给.adjust类添加如下CSS规则即可：

.adjust {
  /* 三个参数分别为最小字号、动态适配值、最大字号，可根据实际需求调整数值 */
  font-size: clamp(1.5rem, 9vw, 7.5rem);
  width: 100%;
  /* 针对两行文字的场景优化对齐 */
  text-align: center;
  line-height: 1.2;
}

• 参数说明：clamp中间的动态值用vw（视窗宽度占比）单位，会跟随屏幕尺寸自动缩放，同时限制了最小和最大字号，避免文字过小看不清或者过大溢出容器，目前全球98%以上的用户浏览器都支持该属性，完全满足生产环境使用。

方案2：JS动态计算（适合需要100%精确匹配容器的场景） #

如果需要文字完全严丝合缝填满容器，不受文字内容、容器尺寸变化影响，可以用少量JS实现动态计算：

// 文字适配函数
function fitTextToContainer(element) {
  const parentContainer = element.parentElement;
  let testFontSize = 200;
  element.style.fontSize = `${testFontSize}px`;
  // 迭代调整字号直到文字完全适配容器
  while (element.offsetWidth > parentContainer.clientWidth || element.offsetHeight > parentContainer.clientHeight) {
    testFontSize -= 1;
    element.style.fontSize = `${testFontSize}px`;
  }
}

// 初始化调用
const titleEl = document.querySelector('.adjust');
fitTextToContainer(titleEl);

// 窗口大小变化时重新适配
window.addEventListener('resize', () => fitTextToContainer(titleEl));

• 注意：该方案适配精度更高，适合文字内容会动态变化的场景，性能开销极低，不会影响页面加载速度。

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