如何分割文本？

Question

我有一个反应组件，我需要触发一个动画，但我想接收一个长文本并取决于容器的宽度（500px 或 300px），并且取决于文本的大小我会有或多或少文本行。

¿我怎样才能拆分文本以获得一组文本，但是是动态的？因为文本来自 api 并且长度是可变的。

我需要在每个

中使用 GSAP 动画来显示文本，但我认为这是简单的部分

这是代码：

const Test = () => {
  const paragraphRef = useRef(null);
  const text = "a really long text, like 500 words"
  useEffect(() => {
    // get the values of the ref
  },[])

  return (
    <div>

      <div className='h-screen'>
        <div className='w-[300px] md:w-[500px] mx-auto' ref={paragraphRef}>
            {
              /**
               * Here i want to map an array each line like: allTheLines.map((text) => <p className="text-lg md:text-xl">{text}</p>)
               */
            }
        </div>
      </div>
    </div>
  );
};

export default Test;