MUI中带项目符号的文本第二行与首行对齐问题如何解决？

你当前直接在<Typography>内插入•作为项目符号的写法，项目符号属于行内文本的一部分，文本换行时会默认从容器最左侧开始，因此第二行无法和首行文字对齐，通过悬挂缩进的CSS配置即可快速解决。

方案1：最小改动方案（无需修改DOM结构） #

给每个带项目符号的<Typography>组件添加sx属性，配置左内边距和负首行缩进即可实现悬挂对齐效果：

<Card sx={{ maxWidth: 200 }}>
  <CardMedia
    component="img"
    height="140"
    image="/static/images/cards/contemplative-reptile.jpg"
    alt="green iguana"
  />
  <CardContent>
    <Typography gutterBottom variant="h5" component="div">
      Lizard
    </Typography>
    <Box>
      <Typography 
        variant="body2" 
        color="error"
        sx={{ pl: '1em', textIndent: '-1em' }}
      >
        &bull; Hello how are you doing there?
      </Typography>
    </Box>
    <Box>
      <Typography 
        variant="body2" 
        color="error"
        sx={{ pl: '1em', textIndent: '-1em' }}
      >
        &bull; Hi how are you doing there?
      </Typography>
    </Box>
  </CardContent>
  <CardActions>
    <Button size="small">Share</Button>
    <Button size="small">Learn More</Button>
  </CardActions>
</Card>

原理说明：pl: '1em'给整个文本块左侧预留1个字符宽度的空间，textIndent: '-1em'让首行向左偏移1个字符宽度，刚好把项目符号放在预留的左侧空间内，后续换行的文本都会在预留空间右侧，自然和首行文字对齐。

方案2：语义化优化方案 #

如果是列表类内容，更推荐使用原生列表标签或MUI的List组件，天然支持换行对齐，无需手动写项目符号：

<CardContent>
  <Typography gutterBottom variant="h5" component="div">
    Lizard
  </Typography>
  <Box component="ul" sx={{ m: 0, pl: 2, color: 'error.main' }}>
    <Box component="li">
      <Typography variant="body2">
        Hello how are you doing there?
      </Typography>
    </Box>
    <Box component="li">
      <Typography variant="body2">
        Hi how are you doing there?
      </Typography>
    </Box>
  </Box>
</CardContent>

该方案语义化程度更高，后续需要调整列表样式、项目符号样式时也更灵活。

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