MUI(v5) List中ListItemText主文本覆盖右侧内容的解决问询

DevOps 小满

2026-7-14

解决MUI v5 ListItem文本溢出覆盖右侧内容的问题

核心方案

通过调整flex布局规则和文本换行属性，让左侧<ListItemText>在剩余空间内自动换行（含断词），同时锁定右侧元素的宽度避免被挤压。

具体实现步骤

1. 配置ListItem的flex容器规则

给<ListItem>设置flex布局，让右侧元素保持固定宽度不被压缩，左侧文本占据剩余空间：

右侧元素添加flex-shrink: 0，禁止宽度被压缩
左侧<ListItemText>添加flex-grow: 1，占据容器内除右侧元素外的所有可用空间

2. 强制左侧文本换行/断词

通过sx属性给<ListItemText>的文本容器设置换行规则，按需选择以下属性：

whiteSpace: 'normal'：允许文本自动换行
overflowWrap: 'break-word'：优先在单词边界断词，仅当单词过长时才在中间断词（适合普通文本）
wordBreak: 'break-all'：允许在任意字符处断词（适合长英文单词、无空格字符串场景）

完整示例代码

import { List, ListItem, ListItemText, Typography } from '@mui/material';

export default function FixedRightListItem() {
  return (
    <List>
      <ListItem sx={{ display: 'flex', alignItems: 'center' }}>
        {/* 左侧文本区域 */}
        <ListItemText 
          primary="这是一段超长的左侧文本示例，当窗口水平缩小时需要自动换行，绝对不能覆盖右侧的内容"
          sx={{
            flexGrow: 1,
            '& .MuiListItemText-primary': {
              whiteSpace: 'normal',
              overflowWrap: 'break-word', // 普通文本优先用这个，需要强制断词就换成wordBreak: 'break-all'
            }
          }}
        />
        {/* 右侧内容区域，锁定宽度不被压缩 */}
        <Typography sx={{ flexShrink: 0, marginLeft: 2 }}>
          右侧固定值
        </Typography>
      </ListItem>
    </List>
  );
}