自定义文字渐入组件移动端换行问题求助

问题根源 #

你当前的实现中，每个单词对应一个独立的Typography组件，而Material-UI的Typography默认是块级元素（display: block），这会导致每个单词单独占据一行，无论屏幕宽度如何都无法自动换行，这就是移动端显示异常的核心原因。

解决方案 #

1. 将每个Typography设置为内联/内联块级元素，让单词能在同一行排列，超出容器宽度时自动换行
2. 替换\u00a0（不换行空格）为更可控的间距方案，确保换行逻辑正常触发
3. 给映射的元素添加key属性，符合React列表渲染规范

修正后的代码 #

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';

const useStyles = makeStyles(theme => ({
    textFadeIn: {
        opacity: 0,
        display: 'inline', // 设置为内联元素，让单词在同一行排列
        animationName: '$fadeIn',
        animationDuration: ({animationSpeed}) => (`${animationSpeed}s`),
        animationFillMode: 'forwards',
        marginRight: '0.25em', // 用margin代替空格，避免字符解析差异
    },
    '@keyframes fadeIn': {
        '0%': { opacity: 0 },
        '100%': { opacity: 1 },
    },
}));

export default function FadeInWords({ text, className, style, delay = 0.2, animationSpeed=1 }) {
    const classes = useStyles({ animationSpeed });
    const words = text.split(' ');

    return (
        <span style={{ whiteSpace: 'pre-wrap' }}> {/* 外层容器确保整体文本正常换行 */}
            {words.map((word, index) => (
                <Typography
                    key={index} // 添加key属性，修复React渲染警告
                    className={[classes.textFadeIn, className]}
                    style={{ ...style, animationDelay: `${index * delay}s` }}
                >
                    {word}
                </Typography>
            ))}
        </span>
    );
} 

关键说明 #

• display: 'inline'：将块级的Typography转为内联元素，让单词和普通文本一样在一行排列，超出宽度自动换行
• marginRight代替空格：避免空格字符在不同设备/浏览器上的解析差异，同时稳定控制单词间的间距
• 外层span加whiteSpace: 'pre-wrap'：确保整体文本在需要时能正常换行，同时保留单词间的间距
• 添加key属性：符合React列表渲染要求，消除控制台警告并提升渲染性能

可选移动端适配优化 #

如果需要针对移动端调整间距或动画节奏，可以结合useMediaQuery做精细化控制：

import { useMediaQuery, useTheme } from '@material-ui/core';

// 组件内部添加
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

// 在样式中根据设备调整
marginRight: isMobile ? '0.15em' : '0.25em',
// 或者调整动画延迟
animationDelay: `${index * (isMobile ? 0.1 : delay)}s`

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