如何保持地图中单词之间的间距

Question

我正在尝试使用 Framer Motion 为文本添加动画。但是，我需要逐个字母地对文本进行动画处理。当我将它们分开并尝试重新分配时，它们失去了单词之间的空格。如果我通过“Web Developer”，结果将是“WebDeveloper”。有办法维持空间吗？

import { motion } from 'framer-motion'

type Props = {
    text: string
}

function AnimatedText({ text }: Props) {

    const characters = text.split('')

    return (
        <>
                <div className='flex'>
                    {characters.map((char, index) => (
                        <motion.div
                            key={index}
                            initial={{ opacity: 0, y: 15 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.04 * index }}
                        >
                            {char}
                        </motion.div>
                    ))}
                </div>
        </>
    )
}

export default AnimatedText

Answer 1

您可以将white-space: pre应用于motion.div元素 - 但随后您需要消除在{char}之前和之后获得的额外空白。将空格替换为不间断空格也应该可行。