如何在 Material-UI ExpansionPanelSummary 中换行或截断长字符串

Question

我想创建一个

ExpansionPanel

，其中摘要可能是一串很长的不间断字符（即没有连字符，没有空格）。

当我尝试时，

ExpansionPanelSummary

组件在窄宽度显示器上显示效果很差 - 它覆盖了按钮并溢出到屏幕外。

这是我的示例，来自 ExpansionPanel Material-UI 演示，缩小输出框架的宽度，您可以看到电子邮件地址没有换行并且看起来很丑：https://codesandbox.io/s/ wqm5k3vmyw

我尝试在

nowrap

上使用

Typography

来将其剪辑（我的首选解决方案）：

<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
  <Typography nowrap className={classes.heading}>
    [email protected]
  </Typography>
</ExpansionPanelSummary>

我还尝试添加样式

overflowWrap: "break-word"

来强制它在任何地方换行，而不仅仅是在连字符或空格上。

我能做的最好的事情就是通过将

style={{ textOverflow: "ellipsis", overflow: "hidden" }}

添加到

ExpansionPanel

来使文本不会溢出到扩展面板本身之外（请参阅链接示例中的第二个示例）。

理想情况下，我希望它通过从上下文右侧截断来发挥作用，显示省略号并且不覆盖展开图标。
我怎样才能用

ExpansionPanel

做到这一点？

如果做不到这一点，我怎样才能强制它自动换行？

我使用的是material-UI v3.4.0，问题在 Chrome 和 Firefox 上可见。

Answer 1

来自官方文档：https://material-ui.com/api/typography/

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

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

<Typography noWrap className={classes.heading}>
  [email protected]
</Typography>

Answer 2

建议您使用带有 textOverflow: "ellipsis" 样式的 div 包裹 Typography 元素，例如：

<div style={{overflow: "hidden", textOverflow: "ellipsis", width: '11rem'}}> 
  <Typography nowrap className={classes.heading}>
    [email protected]
  </Typography>
</div>

Answer 3

我是这样解决的：

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

组件本身，而是将其应用于“内部内容”。

Answer 4

要在材质/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 助手可以方便地根据屏幕宽度缩小文本。

Answer 5

如果您想知道如何进行多行截断，那么 @David 的另一个答案涵盖了它：

<Typography
   sx={{
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      display: '-webkit-box',
      WebkitLineClamp: '2',
      WebkitBoxOrient: 'vertical',
   }}
>
</Typography>

Answer 6

如果您想将文本换行，请使用：-

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