如何在MUI Accordion或可折叠卡片中部分展示文本？

完全可行，下面给你两种常用组件的实现方案：

一、使用MUI Accordion组件 #

核心思路是：在AccordionSummary里展示截断后的评论内容，AccordionDetails里放完整内容，配合CSS实现文本截断效果。

示例代码：

import { Accordion, AccordionSummary, AccordionDetails, Typography } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const TruncatedCommentAccordion = ({ comment }) => {
  return (
    <Accordion>
      <AccordionSummary
        expandIcon={<ExpandMoreIcon />}
        sx={{
          '& .MuiTypography-root': {
            display: '-webkit-box',
            WebkitLineClamp: 3, // 显示3行后截断
            WebkitBoxOrient: 'vertical',
            overflow: 'hidden',
          }
        }}
      >
        <Typography>{comment}</Typography>
      </AccordionSummary>
      <AccordionDetails>
        <Typography>{comment}</Typography>
      </AccordionDetails>
    </Accordion>
  );
};

说明：通过sx内的CSS属性-webkit-line-clamp控制显示行数，超出部分自动截断并显示省略号，点击Accordion即可展开查看完整内容。

二、使用可折叠卡片（Card + Collapse组件） #

如果偏好轻量化的卡片样式，可结合Card和Collapse组件实现：

示例代码：

import { Card, CardContent, Typography, IconButton, Collapse } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { useState } from 'react';

const CollapsibleCommentCard = ({ comment }) => {
  const [expanded, setExpanded] = useState(false);

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

  return (
    <Card sx={{ maxWidth: 600 }}>
      <CardContent>
        <Typography
          variant="body1"
          sx={{
            display: '-webkit-box',
            WebkitLineClamp: expanded ? 'unset' : 3,
            WebkitBoxOrient: 'vertical',
            overflow: expanded ? 'visible' : 'hidden',
            marginBottom: expanded ? 0 : 1,
          }}
        >
          {comment}
        </Typography>
        <IconButton
          size="small"
          onClick={handleExpandClick}
          sx={{ float: 'right' }}
        >
          <ExpandMoreIcon sx={{ transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform 0.2s' }} />
          <Typography variant="caption">{expanded ? '收起' : '查看更多'}</Typography>
        </IconButton>
      </CardContent>
    </Card>
  );
};

说明：通过useState控制展开状态，动态切换文本的截断样式；也可以选择把完整内容单独放在Collapse组件中，两种方式都能满足需求。

额外优化点 #

• 可自定义判断文本长度，仅当评论超过指定字数/行数时显示展开按钮，避免短评论出现多余控件
• 调整截断后的省略号样式，或在截断内容末尾添加“查看更多”提示文本

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