如何实现HTML容器内文本溢出时自动缩小字号以适配容器尺寸

方案1：纯CSS实现（现代浏览器推荐） #

该方案依赖CSS容器查询特性，主流Chrome、Firefox、Safari新版本均已支持，无需额外JS逻辑，性能最优。

修改后代码 #

HTML部分无需调整，CSS修改如下：

.box{
  height: 100px;
  width: 300px;
  background-color: blue;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  /* 新增：声明为尺寸容器，启用容器相对单位 */
  container-type: size;
  padding: 10px;
  box-sizing: border-box;
}
.box p {
  margin: 0;
  color: #fff;
  /* 自动适配容器尺寸，字号在12px到16px之间动态调整，可根据需求修改阈值 */
  font-size: clamp(12px, 5cqh, 16px);
  /* 可选：开启文本平衡排版，避免出现孤行/过长行 */
  text-wrap: balance;
}

逻辑说明：cqh是容器高度单位，1cqh等于当前.box容器高度的1%，clamp函数会自动在你设置的最小、最大字号区间内适配，保证文本完全容纳在容器内部。 #

方案2：JavaScript实现（全浏览器兼容） #

如果需要兼容IE、老版本浏览器，可以用JS动态计算字号，适配所有运行环境。

实现代码 #

首先无需修改原有HTML、CSS，新增如下JS逻辑：

function fitTextToContainer() {
  const container = document.querySelector('.box');
  const textNode = document.querySelector('.box p');
  // 可自定义配置：最大/最小字号阈值
  const MAX_FONT_SIZE = 16;
  const MIN_FONT_SIZE = 12;

  let currentSize = MAX_FONT_SIZE;
  textNode.style.fontSize = `${currentSize}px`;

  // 文本溢出时逐步缩小字号
  while (
    (textNode.scrollHeight > container.clientHeight || textNode.scrollWidth > container.clientWidth)
    && currentSize > MIN_FONT_SIZE
  ) {
    currentSize -= 0.5;
    textNode.style.fontSize = `${currentSize}px`;
  }
}

// 页面加载完成后执行，窗口尺寸变化时重新计算适配
window.addEventListener('load', fitTextToContainer);
window.addEventListener('resize', fitTextToContainer);

逻辑说明：脚本会自动检测文本是否超出容器边界，逐步下调字号直到文本完全容纳，同时设置了最小字号限制，避免文字过小影响可读性。 #

补充建议 #

如果接受文本不完整展示，也可以选择溢出截断方案，给.box加overflow: hidden; text-overflow: ellipsis;属性，超出部分展示省略号，性能更好但不符合完整展示文本的需求。

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