Question

我想创建一个ExpansionPanel，其中摘要可能是相当长的不间断字符字符串（即没有连字符，没有空格）。

当我尝试时，ExpansionPanelSummary组件在窄宽度显示器上显示不佳-它会覆盖按钮并在屏幕外溢出。

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

我尝试在nowrap上使用Typography进行裁剪（我的首选解决方案）：

<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
  <Typography nowrap className={classes.heading}>
    areallyreallylongaddress@email.example.com
  </Typography>
</ExpansionPanelSummary>

我还尝试过添加样式overflowWrap: "break-word"，以强制将其环绕在任何地方，而不仅限于连字符或空格。

我能做的最好的事情就是通过在style={{ textOverflow: "ellipsis", overflow: "hidden" }}上添加ExpansionPanel来使文本不超出扩展面板本身（请参见链接示例中的第二个示例）。

理想情况下，我希望它可以通过从上下文右侧截断，显示省略号而不覆盖展开图标来发挥作用。
我该如何使用ExpansionPanel来做到这一点？

如果失败，我怎么能强迫它自动换行？

我正在使用Material-UI v3.4.0，该问题在Chrome和Firefox上可见。

Answer 1

这是我解决的方法：

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 2

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

在'noWrap'中注意大写字母'W'。

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

Answer 3

建议您用一个以textOverflow样式设置的div包裹Typography元素：“省略号”，例如：

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

Answer 4

如果要将文本换行到换行符，请使用：-

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

Answer 5

下面的工作，换行到下一行：

<Typography style={{ wordWrap: 'break-word' }}>6032191ec7083f3ef8c6a6b9</Typography>

如何在Material-UI ExpansionPanelSummary

5 个答案: