Material-UI中两个同行Typography换行时序号脱离正文怎么解决？

问题描述 #

使用Material-UI开发时遇到排版问题：放在同一行的两个Typography组件，长文本换行时序号和正文出现分离，短文本时显示正常，已尝试修改行、列、nowrap、breakword等属性均未解决。
原实现代码如下：

<Grid item container direction="column" >
{Array.isArray(x.sense) && x.sense && x.sense.map((x, index) => (
    <>
        {Array.isArray(x.gloss) ?
            <Grid item container direction="row">
                <Typography key={index} style={{ color: "#90a4ae", fontSize: "25px" }}>
                    {index + 1 + '. '}
                </Typography>
                <Typography key={index + 1} style={{ color: "#000000", fontSize: "25px", marginLeft: "5px" }}>
                    {x.gloss.toString().replace(/,/g, ', ')}
                </Typography>
            </Grid> : null
        }
    </>
))}

解决方案 #

方案1：合并到同一个Typography组件 #

将序号用span标签包裹后，嵌套进正文所在的同一个Typography组件即可解决问题，实现代码如下：

<Typography key={index + 1} style={{ color: "#000000", fontSize: "25px", marginLeft: "5px" }}>
    <span style={{ color: "#90a4ae", fontSize: "25px" }}>{index + 1 + '. '}</span>
    {x.gloss.toString().replace(/,/g, ', ')}
</Typography>

方案2：保留独立Typography组件的实现 #

如果业务需要保留两个独立的Typography组件，可以修改外层Grid和组件的样式属性：

<Grid item container direction="row" alignItems="baseline" gap="5px">
    <Typography key={index} style={{ color: "#90a4ae", fontSize: "25px", flexShrink: 0 }}>
        {index + 1 + '. '}
    </Typography>
    <Typography key={index + 1} style={{ color: "#000000", fontSize: "25px", flex: 1 }}>
        {x.gloss.toString().replace(/,/g, ', ')}
    </Typography>
</Grid>

原因说明 #

原写法中序号和正文分属两个独立的Typography组件，二者是独立的排版单元，空间不足时浏览器会将第二个Typography整体换到下一行，导致序号和正文分离。
合并到同一个Typography后，序号和正文属于同一文本流，排版时序号会和正文首字绑定，换行时不会出现分离的情况；使用弹性布局属性调整独立组件的排版规则，也可以实现相同的效果。

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