Material UI Accordion中flex布局标题溢出容器如何实现省略号截断

核心原因 #

flex布局中，子项默认的最小宽度是其内容的实际宽度，就算给父容器设置了flex:1占用剩余空间，长文本也会撑开容器，最终导致整个Accordion内容溢出。

修复步骤 #

• 给承载标题的第一个flex项设置flex: 1的同时，新增min-width: 0属性，允许容器宽度收缩到小于内容宽度。
• 给标题文本元素添加以下三个强制样式，实现超出显示省略号的效果：

  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 隐藏部分显示为省略号 */
  

• 给承载按钮的第二个固定宽度flex项添加flex-shrink: 0属性，避免布局挤压时按钮容器宽度被压缩。

代码示例 #

import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';

function DemoAccordion() {
  return (
    <Accordion>
      <AccordionSummary>
        {/* 标题容器 */}
        <Box sx={{ flex: 1, minWidth: 0, mr: 2 }}>
          <Typography
            sx={{
              whiteSpace: 'nowrap',
              overflow: 'hidden',
              textOverflow: 'ellipsis'
            }}
          >
            超长标题测试超长标题测试超长标题测试超长标题测试超长标题测试超长标题测试
          </Typography>
        </Box>
        {/* 固定宽度按钮容器 */}
        <Box sx={{ width: '140px', flexShrink: 0 }}>
          <Button size="small">编辑</Button>
          <Button size="small">删除</Button>
        </Box>
      </AccordionSummary>
      {/* AccordionDetails内容省略 */}
    </Accordion>
  )
}

若保留Accordion默认的展开箭头，无需额外调整样式，上述配置可直接生效，箭头占据的空间会自动在计算剩余宽度时扣除。

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