如何在 Material-UI ExpansionPanelSummary 中包装或截断长字符串

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

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

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

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

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

Answer 2

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

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