React实现长文本自动填充固定尺寸非滚动卡片并续接至下一张

以下是我设想的效果示意图：

我编写了一个简单的Card组件，代码如下：

function Card({ width, height, text }) {
  return (
    <div className="card" style={{ width, height }}>
      {text}
    </div>
  );
}

每张卡片具有任意的宽高尺寸，现有一段超长文本需要分配到多张卡片中，下一张卡片需承接上一张未能容纳的剩余文本。

需要注意的是：

• 卡片不可滚动
• 卡片尺寸不可扩展

我做了一个硬编码文本的示例，理想情况是传入一段超长文本，系统自动将其分配到多张卡片中。

请问该如何实现这一功能？

要实现文本自动拆分适配固定尺寸卡片的功能，核心是动态计算文本在卡片容器内的可容纳量，逐步拆分文本并生成对应的Card组件，具体步骤如下：

1. 编写文本拆分工具函数 #

利用DOM的Range和getBoundingClientRectAPI精确计算文本的可容纳范围，模拟卡片环境避免影响页面布局：

function splitTextToFitContainer(text, containerWidth, containerHeight) {
  // 创建临时容器模拟卡片样式
  const tempContainer = document.createElement('div');
  tempContainer.style.width = containerWidth;
  tempContainer.style.height = containerHeight;
  tempContainer.style.position = 'absolute';
  tempContainer.style.visibility = 'hidden';
  tempContainer.style.overflow = 'hidden';
  // 匹配实际卡片的字体样式，保证计算准确
  tempContainer.style.font = window.getComputedStyle(document.querySelector('.card')).font;
  document.body.appendChild(tempContainer);

  const range = document.createRange();
  range.setStart(tempContainer, 0);
  tempContainer.textContent = text;

  let endOffset = text.length;
  range.setEnd(tempContainer.firstChild, endOffset);
  
  // 逐步缩减文本长度，直到容器刚好容纳
  while (range.getBoundingClientRect().height > parseFloat(containerHeight) && endOffset > 0) {
    endOffset--;
    range.setEnd(tempContainer.firstChild, endOffset);
  }

  const fittedText = text.substring(0, endOffset);
  const remainingText = text.substring(endOffset);
  
  document.body.removeChild(tempContainer);
  return { fittedText, remainingText };
}

2. 封装自动生成卡片列表的组件 #

基于拆分函数，编写组件循环处理文本，生成所有需要的Card：

function CardList({ width, height, text }) {
  const [cards, setCards] = React.useState([]);

  React.useEffect(() => {
    let remainingText = text;
    const generatedCards = [];

    while (remainingText.length > 0) {
      const { fittedText, remainingText: newRemaining } = splitTextToFitContainer(remainingText, width, height);
      if (!fittedText) break; // 防止极端情况出现无限循环
      generatedCards.push(fittedText);
      remainingText = newRemaining;
    }

    setCards(generatedCards);
  }, [text, width, height]);

  return (
    <div className="card-list">
      {cards.map((cardText, index) => (
        <Card key={index} width={width} height={height} text={cardText} />
      ))}
    </div>
  );
}

3. 关键注意事项 #

• 必须严格匹配卡片的字体样式（字号、行高、字体族等），否则临时容器的计算结果会和实际卡片不符
• 如果文本包含HTML标签，需要调整拆分逻辑，避免标签被截断（可先转为纯文本处理，或针对富文本做更复杂的Range节点拆分）
• 若卡片尺寸动态变化，需监听尺寸变化事件并重新触发文本拆分逻辑

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