Javascript 将文本换行到a<；p>；标记，当每个字母都是单独的<；span>；（用于动画目的）在react.js中

我的任务是在一个公文包网站上创建一个介绍性文本，我正在盖茨比.js中创建这个网站，每个字母上都有一个单独的动画，所以当你将鼠标悬停在一个字母上时，它会反弹并向上缩放，然后离开光标时，它会反弹并向下缩放

我编写了一个组件，它接收文本，将字符串拆分为数组，映射另一个组件中的每个字母，并用足够的事件侦听器和类名将每个字符包装在标记中

下面是它的外观：

IntroText.js

export default function IntroText({children}) {
    return (
    <div>
        <p className='intro-text'>
            {children.split('').map((e, i) => <IntroLetter key={i} char={e}/>)}
        </p>
    </div>
  )
}

如果我将

.single letter

保留为内联元素，动画将不起作用，但文本呈现良好，因此，尽管每个角色都被包装在单独的

中，但行在正确的位置断开。如果我将

.single letter

设置为

内联块

元素，动画效果会很好，但空格会折叠（因此需要检查

SingleLetter.js中的char
===='
）。如果我将空格保留为内联span元素，将其余字符保留为
inline block
span，则空格渲染正确，动画工作正常，但换行符不会保留单词

我可以将我的字符串分成几个
IntroText
组件，每个组件对应一行，但显然，在响应站点上，这不是一个可行的解决方案。我该怎么办

编辑：我制作了CodeSandbox示例：
您可以通过将单词放在
内联块中来实现这一点。检查此沙箱以获得一个工作示例：

函数内部字母（{char}）{
const[hoverClass，setHoverClass]=useState（“单字母”）；
返回(
setHoverClass（“单字母悬停”）}
onMouseLeave={（）=>setHoverClass（“未覆盖的单字母”）}
>
{char}
);
}
函数内字（{word}）{
返回(
{word.split（“”）.map（（字母，字母索引）=>(
))}
);
}
函数IntroText（{children}）{
返回(

{children.split（“”）.map（（word，wordIndex）=>(
))}

);
}
您能提供一个有效的解决方案吗？我对动画的CSS特别感兴趣。我编辑了原始的post adding CodeSandbox示例。在这里你还能使用普通的javascript吗？
export default function IntroLetter({char}) {
  const [ hoverClass, setHoverClass ] = useState('single-letter')

  if (char === ' ') {
    return <span> </span>
  } else {
    return (
      <span
        className={hoverClass}
        onMouseOver={() => setHoverClass('single-letter hovered')}
        onMouseLeave={() => setHoverClass('single-letter unhovered')}
      >
        { char }
      </span>
    )
  }
}

.intro-text {
    width: 80%;

    .single-letter {
        display: inline-block;
        transform-origin: 50% 84%;      
    }

    .hovered {
        animation-name: stretch;
        animation-duration: 0.15s;
        animation-timing-function: linear;
        animation-fill-mode: forwards    
    }

    .unhovered {
        animation-name: stretch-back;
        animation-duration: 0.25s;
        animation-timing-function: linear;
    }
}

function IntroLetter({ char }) {
  const [hoverClass, setHoverClass] = useState("single-letter");
  return (
    <span
      className={hoverClass}
      onMouseOver={() => setHoverClass("single-letter hovered")}
      onMouseLeave={() => setHoverClass("single-letter unhovered")}
    >
      {char}
    </span>
  );
}

function IntroWord({ word }) {
  return (
    <span style={{ display: "inline-block" }}>
      {word.split("").map((letter, letterIndex) => (
        <IntroLetter index={letterIndex} char={letter} />
      ))}
    </span>
  );
}

function IntroText({ children }) {
  return (
    <div>
      <p className="intro-text">
        {children.split(" ").map((word, wordIndex) => (
          <Fragment>
            <IntroWord key={wordIndex} word={word} />
            <span> </span>
          </Fragment>
        ))}
      </p>
    </div>
  );
}