如何在材质UI ExpansionPanelSummary中换行或截断长字符串

从官方文件中: https://material-ui.com/api/typography/

noWrap:如果为true,文本将不换行,而是用文本溢出省略号截断。 请注意,文本溢出只能发生在块级或内联块级元素中(元素需要有宽度才能溢出)。

注意“noWrap”中的大写字母“W”。

<Typography noWrap className={classes.heading}>
  areallyreallylongaddress@email.example.com
</Typography>

建议您用一个div来包装排版元素,该div的样式为textfoverflow:“省略号”,例如:

<div style={{overflow: "hidden", textOverflow: "ellipsis", width: '11rem'}}> 
  <Typography nowrap className={classes.heading}>
    areallyreallylongaddress@email.example.com
  </Typography>
</div>

我是这样解决的:

const useStyles = makeStyles(theme => ({
  summary: {
    overflow: 'hidden'
  }
}))

// ... snipped ...

const classes = useStyles()

// ... snipped ...

<ExpansionPanelSummary classes={{ content: classes.summary }} expandIcon={<SomeIcon />}>
  <Typography noWrap title={experiment.name}>{longTextHere}</Typography>
</ExpansionPanelSummary>

而不是将样式应用于 ExpansionPanelSummary 组件本身,将其应用于“内部内容”。

包裹( 不 使用椭圆截断)材质/MUI按钮内的文本:

<LoadingButton
  sx={{
    fontSize: {
      lg: 12,
      md: 11,
      sm: 10,
      xs: 10
    },
    wordWrap: 'break-word',
    width: '11rem',
  }}>
  <div style={{ whiteSpace: 'normal'}}> 
    My Button Text
  </div>
</LoadingButton>

这个 width: '11rem'

这个 fontSize sx助手可以方便地根据屏幕宽度缩小文本。

如果要将文本换行,请使用:-

<Box component="div" whiteSpace="normal">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</Box>