如何让动态尺寸容器内文字设为无溢出的最大字号？

针对你需要给数百个动态尺寸容器设置最大适配字号的需求，以下是两种高效可行的方案，替代低效的逐像素遍历和复杂的线性计算：

一、CSS容器查询方案（无JS，现代浏览器适用） #

利用CSS容器查询可以针对每个容器的实际尺寸动态调整字号，无需复杂计算：

1. 给容器设置查询上下文：

.text-container {
  container-type: inline-size; /* 基于容器宽度触发查询 */
  overflow: hidden;
  padding: 8px; /* 根据需求调整内边距 */
}

2. 结合clamp()和容器尺寸动态计算字号，同时可通过CSS变量控制行数/字符数：

.text-container .content {
  /* 基础适配：结合容器宽度和预期字符数 */
  --char-per-line: 20; /* 每行预期字符数，可根据容器类型自定义 */
  font-size: clamp(1rem, (100% / var(--char-per-line)) * 10, 3.5rem);
  line-height: 1.2;
  word-wrap: break-word;
}

/* 针对不同尺寸的容器细化规则 */
@container (width >= 300px) {
  .text-container .content {
    --char-per-line: 30;
    font-size: clamp(1.2rem, (100% / var(--char-per-line)) * 12, 4rem);
  }
}

这种方案无需JS，完全由CSS处理，适合结构规整、文本行数可预期的场景。

二、高效JavaScript方案（兼容所有浏览器，适配复杂场景） #

替代逐像素遍历的低效方式，使用二分查找法快速定位最大适配字号，同时通过批量处理减少浏览器重排：

核心代码 #

function optimizeTextSize(containers) {
  // 批量隐藏容器，避免计算过程中多次重排
  containers.forEach(box => box.style.visibility = 'hidden');

  containers.forEach(box => {
    const textEl = box.querySelector('.content');
    if (!textEl) return;

    // 定义字号搜索范围，可根据需求调整
    let min = 8, max = 100, bestSize = min;
    const boxStyle = getComputedStyle(box);
    // 计算容器可用宽高（扣除内边距）
    const availWidth = box.clientWidth - parseInt(boxStyle.paddingLeft) - parseInt(boxStyle.paddingRight);
    const availHeight = box.clientHeight - parseInt(boxStyle.paddingTop) - parseInt(boxStyle.paddingBottom);

    // 二分查找最优字号
    while (min <= max) {
      const mid = Math.floor((min + max) / 2);
      textEl.style.fontSize = `${mid}px`;
      
      const textWidth = textEl.scrollWidth;
      const textHeight = textEl.scrollHeight;

      if (textWidth <= availWidth && textHeight <= availHeight) {
        bestSize = mid;
        min = mid + 1; // 尝试更大字号
      } else {
        max = mid - 1; // 字号过大，缩小范围
      }
    }

    textEl.style.fontSize = `${bestSize}px`;
    box.style.visibility = 'visible';
  });
}

// 初始化及监听尺寸变化
const allBoxes = document.querySelectorAll('.text-container');
optimizeTextSize(allBoxes);

// 监听容器尺寸变化，仅更新变化的容器
const resizeObserver = new ResizeObserver(entries => {
  const changedBoxes = entries.map(entry => entry.target);
  optimizeTextSize(changedBoxes);
});
allBoxes.forEach(box => resizeObserver.observe(box));

关键优化点 #

• 二分查找将时间复杂度从O(n)降至O(log n)，几百个容器也能快速完成计算
• 批量隐藏容器，减少计算过程中的重排重绘，提升性能
• 使用ResizeObserver精准监听容器尺寸变化，避免全局resize事件的冗余计算

注意事项 #

• CSS方案需确保浏览器支持容器查询（Chrome 105+、Firefox 110+）
• JS方案可兼容所有现代浏览器及IE11（需兼容ResizeObserver的话可引入polyfill）
• 文本元素需设置white-space: normal和word-wrap: break-word确保正常换行

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