如何让单行文本像object-fit:contain那样填充容器？React适配方案

需求概述 #

需要实现单行文本完全填充父容器，效果等同于图片的object-fit: contain特性：

• 文本不被拉伸扭曲
• 尽可能填满容器空间，同时不被裁剪
• 适配React环境，文本内容变化时无明显布局跳动
• 所有尺寸计算必须在首次渲染前完成

已知的SVG方案（如《Pure SVG way to fit text to a box》《SVG Scaling Text to fit container》）均无法满足需求：要么挂载后才计算viewBox导致布局闪烁，要么会拉伸文本。

已尝试方案的问题 #

• 曾用SVG组件，在useEffect中挂载后计算BBox并设置viewBox，但存在两个核心问题：
  1. 文本数量突变（如从0到10000字符）时会出现大幅横向跳动
  2. 首次渲染时BBox未更新，viewBox不正确，导致初始布局跳动
• 尝试在React外部渲染隐藏SVG预测量BBox，但未成功

可行解决方案 #

方案1：使用OffscreenCanvas预测量文本（推荐） #

利用OffscreenCanvas在React组件渲染前完成文本尺寸计算，无需DOM元素，彻底避免布局跳动。

实现代码

import { useMemo } from 'react';

const FitTextContain = ({ 
  text, 
  containerWidth, 
  containerHeight, 
  fontFamily = 'sans-serif', 
  fontWeight = 'normal' 
}) => {
  // 依赖变化时预计算最佳字体大小
  const optimalFontSize = useMemo(() => {
    if (!text || containerWidth <= 0 || containerHeight <= 0) return 16;

    // 创建OffscreenCanvas进行文本测量
    const canvas = new OffscreenCanvas(1, 1);
    const ctx = canvas.getContext('2d');
    ctx.font = `${fontWeight} 1px ${fontFamily}`;

    // 获取1px字号下的文本尺寸
    const textMetrics = ctx.measureText(text);
    const textWidthAt1px = textMetrics.width;
    // 计算文本实际高度（ ascent + descent 是更准确的字体高度）
    const textHeightAt1px = textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent || 1.2;

    // 计算横向/纵向的最大可行缩放比例，取较小值确保文本完全容纳
    const scaleX = containerWidth / textWidthAt1px;
    const scaleY = containerHeight / textHeightAt1px;
    const scale = Math.min(scaleX, scaleY);

    // 返回最佳字号，限制最小为1px避免过小
    return Math.max(scale, 1);
  }, [text, containerWidth, containerHeight, fontFamily, fontWeight]);

  return (
    <div
      style={{
        width: `${containerWidth}px`,
        height: `${containerHeight}px`,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'hidden',
      }}
    >
      <span
        style={{
          fontSize: `${optimalFontSize}px`,
          fontFamily,
          fontWeight,
          whiteSpace: 'nowrap',
          lineHeight: '1',
        }}
      >
        {text}
      </span>
    </div>
  );
};

export default FitTextContain;

方案说明

• 通过useMemo在组件渲染前完成计算，依赖项变化（文本、容器尺寸、字体属性）时自动重新计算
• OffscreenCanvas无需挂载到DOM，避免了额外的布局开销和渲染闪烁
• 基于1px字号的测量值计算缩放比例，确保文本始终保持原始比例，不被拉伸
• 使用flex布局实现文本居中，无需手动计算位置

方案2：使用隐藏DOM元素预测量（兼容旧环境） #

如果需要兼容不支持OffscreenCanvas的浏览器，可使用隐藏的DOM元素在渲染前完成文本测量。

实现代码

import { useMemo, useRef, useEffect } from 'react';

const FitTextContain = ({ 
  text, 
  containerWidth, 
  containerHeight, 
  fontFamily = 'sans-serif', 
  fontWeight = 'normal' 
}) => {
  const hiddenSpanRef = useRef(null);

  const optimalFontSize = useMemo(() => {
    if (!text || containerWidth <= 0 || containerHeight <= 0) return 16;

    // 初始化隐藏测量元素
    let hiddenSpan = hiddenSpanRef.current;
    if (!hiddenSpan) {
      hiddenSpan = document.createElement('span');
      hiddenSpan.style.cssText = `
        position: absolute;
        visibility: hidden;
        white-space: nowrap;
        font-weight: ${fontWeight};
        font-family: ${fontFamily};
      `;
      document.body.appendChild(hiddenSpan);
      hiddenSpanRef.current = hiddenSpan;
    }

    // 二分法查找最大可行字号（比线性查找效率更高）
    let low = 1;
    let high = Math.max(containerWidth, containerHeight);
    let bestSize = 1;

    while (low <= high) {
      const mid = Math.floor((low + high) / 2);
      hiddenSpan.style.fontSize = `${mid}px`;
      hiddenSpan.textContent = text;

      const { width, height } = hiddenSpan.getBoundingClientRect();

      if (width <= containerWidth && height <= containerHeight) {
        bestSize = mid;
        low = mid + 1;
      } else {
        high = mid - 1;
      }
    }

    return bestSize;
  }, [text, containerWidth, containerHeight, fontFamily, fontWeight]);

  // 组件卸载时清理隐藏元素
  useEffect(() => {
    return () => {
      if (hiddenSpanRef.current) {
        document.body.removeChild(hiddenSpanRef.current);
        hiddenSpanRef.current = null;
      }
    };
  }, []);

  return (
    <div
      style={{
        width: `${containerWidth}px`,
        height: `${containerHeight}px`,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        overflow: 'hidden',
      }}
    >
      <span
        style={{
          fontSize: `${optimalFontSize}px`,
          fontFamily,
          fontWeight,
          whiteSpace: 'nowrap',
          lineHeight: '1',
        }}
      >
        {text}
      </span>
    </div>
  );
};

export default FitTextContain;

方案说明

• 使用绝对定位+隐藏的span元素进行文本测量，不会影响页面布局
• 二分法快速定位最大可行字号，尤其适合长文本场景
• 测量逻辑封装在useMemo中，确保首次渲染时就使用正确字号，避免布局跳动
• 组件卸载时自动清理隐藏元素，避免内存泄漏

关键注意事项 #

1. 容器尺寸必须已知：可以通过useRef获取父容器的实际尺寸，或者将尺寸作为props传入组件
2. 字体属性保持一致：测量用的字体（fontFamily、fontWeight）必须与渲染文本完全一致，否则测量结果会偏差
3. 动态容器适配：如果父容器尺寸动态变化，可以结合ResizeObserver监听尺寸变化，触发重新计算
4. 单行限制：本方案仅针对单行文本，多行文本需要调整测量和布局逻辑

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