Flexbox布局下Div文本字号适配问题：无法检测内容溢出

嘿，这个问题我之前也碰到过！Flex布局下用em字号做内容适配，最容易踩的坑就是容器没有高度约束，导致scrollHeight永远等于clientHeight，根本检测不到溢出。咱们一步步来解决：

为什么检测不到溢出？ #

核心原因有两个：

• 容器没有高度约束：Flex布局默认会让元素根据内容自动撑开高度，哪怕内容再多，容器也会跟着变大，自然不会有溢出。
• overflow属性设置不对：如果div的overflow是默认的visible，内容溢出时不会触发scrollHeight的计算差异，浏览器会认为容器不需要滚动，所以两者数值一致。

解决方案步骤 #

1. 给目标Div添加高度约束与溢出设置 #

首先要确保你的div被限制在固定的空间内，不能随便撑开：

• 如果这些div是Flex项目（放在Flex容器里），给它们设置flex: 1 1 auto或者指定flex-basis，同时加上overflow: hidden，让它们在父容器分配的空间内限制高度。
• 如果父容器是Flex容器，一定要给父容器设置明确的高度（比如height: 100vh、height: 100%，注意父级也要有高度约束），不然子div还是会无限撑开。

2. 修正溢出检测与字号适配逻辑 #

接下来调整你的JS代码，确保能正确检测溢出，并且逐步减小字号：

var fitDivs = document.querySelectorAll("div[data-slide-fit]");
fitDivs.forEach(function(fitDiv) {
  // 基础配置：开启溢出裁剪，确保scrollHeight能正确计算
  fitDiv.style.overflow = 'hidden';
  // 作为Flex项目时，限制高度不自动撑开
  fitDiv.style.flex = '1 1 auto';

  // 获取初始字号（转换为数值，去掉em单位）
  let currentFontSize = parseFloat(getComputedStyle(fitDiv).fontSize);
  const minFontSize = 0.5; // 设置最小字号，防止无限缩小到看不见

  // 检测是否溢出的工具函数
  function hasOverflow() {
    // 同时检测垂直和水平溢出
    return fitDiv.scrollHeight > fitDiv.clientHeight || fitDiv.scrollWidth > fitDiv.clientWidth;
  }

  // 逐步减小字号直到内容适配
  while (hasOverflow() && currentFontSize > minFontSize) {
    currentFontSize -= 0.1; // 每次减小0.1em，可根据需求调整步长
    fitDiv.style.fontSize = `${currentFontSize}em`;
    // 强制浏览器重排，确保scrollHeight/clientHeight更新
    fitDiv.offsetHeight; // 读取offsetHeight会触发重绘，拿到最新尺寸
  }

  // 可选：监听容器尺寸变化，窗口resize时重新适配
  const resizeObserver = new ResizeObserver(() => {
    // 重置字号为当前计算值，重新适配
    currentFontSize = parseFloat(getComputedStyle(fitDiv).fontSize);
    while (hasOverflow() && currentFontSize > minFontSize) {
      currentFontSize -= 0.1;
      fitDiv.style.fontSize = `${currentFontSize}em`;
      fitDiv.offsetHeight;
    }
  });
  resizeObserver.observe(fitDiv);
});

关键细节说明 #

• 强制重排的必要性：修改fontSize后，浏览器可能会延迟更新元素尺寸，读取offsetHeight可以强制浏览器立即重排，确保scrollHeight和clientHeight是最新的数值。
• 最小字号限制：一定要设置minFontSize，避免循环无限执行，导致字号过小无法阅读。
• ResizeObserver的作用：如果容器尺寸会变化（比如窗口缩放），用它监听可以自动重新调整字号，体验更流畅。

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