如何在React中根据容器宽度动态拆分文本？

要实现根据容器宽度（300px/500px响应式）和文本长度拆分文本为行数组，核心思路是通过测量隐藏元素的高度变化来判断换行点——直接依赖CSS换行无法获取每行的文本内容，必须用JS主动计算。以下是具体实现方案：

实现步骤 #

1. 状态与引用初始化 #

• 用useState存储拆分后的行数组
• 用useRef获取目标容器引用、用于测量的隐藏元素引用，同时记录原始文本和当前容器宽度（避免重复计算）

2. 文本拆分核心逻辑 #

创建一个函数，通过逐词添加文本到隐藏元素，监测高度变化确定每行内容：

• 隐藏元素的样式要和目标容器的文本样式完全一致（字体大小、行高、容器宽度），确保测量准确
• 每次添加单词后检查高度，高度变化时说明已换行，将当前内容存入行数组，重置当前行继续处理剩余文本

3. 监听触发时机 #

• 文本更新时（比如API返回新文本）
• 窗口resize时（响应式容器宽度变化）

4. GSAP动画集成 #

拆分完成后，对每个<p>标签应用Reveal动画，监听行数组变化触发动画初始化。

完整代码示例 #

import { useState, useRef, useEffect } from 'react';
import gsap from 'gsap';

const Test = () => {
  const paragraphRef = useRef(null);
  const measurementRef = useRef(null);
  const [textLines, setTextLines] = useState([]);
  // 替换为API返回的长文本即可
  const text = "a really long text, like 500 words. This is a sample paragraph to demonstrate how the text splitting works. When the container width changes between 300px and 500px, the number of lines will adjust accordingly, and each line will be wrapped in a separate p tag for GSAP animations.";
  const [containerWidth, setContainerWidth] = useState(300);
  const prevTextRef = useRef('');
  const prevWidthRef = useRef(300);

  // 拆分文本为行的核心函数
  const splitTextIntoLines = (fullText, targetWidth) => {
    if (!measurementRef.current || !fullText) return [];
    
    const lines = [];
    const words = fullText.split(' ');
    let currentLine = '';
    const measurementEl = measurementRef.current;
    
    // 重置测量元素状态
    measurementEl.style.width = `${targetWidth}px`;
    measurementEl.textContent = '';
    
    for (const word of words) {
      const tempLine = currentLine ? `${currentLine} ${word}` : word;
      measurementEl.textContent = tempLine;
      
      // 高度超过1行说明换行，将之前的内容存入数组
      if (measurementEl.offsetHeight > parseInt(getComputedStyle(measurementEl).lineHeight)) {
        lines.push(currentLine);
        currentLine = word;
      } else {
        currentLine = tempLine;
      }
    }
    
    // 加入最后一行内容
    if (currentLine) lines.push(currentLine);
    return lines;
  };

  useEffect(() => {
    // 获取初始容器宽度
    if (paragraphRef.current) {
      const width = paragraphRef.current.offsetWidth;
      setContainerWidth(width);
      prevWidthRef.current = width;
    }

    // 监听窗口resize更新容器宽度
    const handleResize = () => {
      if (paragraphRef.current) {
        const newWidth = paragraphRef.current.offsetWidth;
        if (newWidth !== prevWidthRef.current) {
          setContainerWidth(newWidth);
          prevWidthRef.current = newWidth;
        }
      }
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  useEffect(() => {
    // 仅在文本或宽度变化时重新拆分
    if (text !== prevTextRef.current || containerWidth !== prevWidthRef.current) {
      const lines = splitTextIntoLines(text, containerWidth);
      setTextLines(lines);
      prevTextRef.current = text;
      prevWidthRef.current = containerWidth;
    }
  }, [text, containerWidth]);

  // GSAP Reveal动画实现
  useEffect(() => {
    if (textLines.length > 0) {
      gsap.fromTo('p.reveal-line', 
        { opacity: 0, y: 10 }, 
        { opacity: 1, y: 0, stagger: 0.1, duration: 0.5, ease: 'power2.out' }
      );
    }
  }, [textLines]);

  return (
    <div>
      <div className='h-screen'>
        <div className='w-[300px] md:w-[500px] mx-auto' ref={paragraphRef}>
          {textLines.map((line, index) => (
            <p key={index} className="text-lg md:text-xl reveal-line">{line}</p>
          ))}
        </div>
      </div>
      {/* 用于测量的隐藏元素，样式必须和目标文本完全一致 */}
      <div
        ref={measurementRef}
        className="absolute invisible text-lg md:text-xl whitespace-pre-wrap"
        style={{ height: 'auto', lineHeight: '1.5' }}
      />
    </div>
  );
};

export default Test;

关键说明 #

• 测量元素样式匹配：隐藏的测量元素必须和目标<p>标签的字体大小、行高、宽度保持一致，否则换行判断会不准确
• 逐词拆分：避免单词被截断，保证文本可读性，若需要逐字符拆分可将split(' ')改为split('')
• 防抖优化（可选）：如果resize事件触发频繁，可添加防抖函数减少计算次数
• API适配：将text替换为API返回的文本即可，文本更新时会自动触发重新拆分

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