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

【问题标题】：How to wrap or truncate long strings in a Material-UI ExpansionPanelSummary如何在 Material-UI ExpansionPanelSummary 中包装或截断长字符串
【发布时间】：2019-04-12 18:44:35
【问题描述】：

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

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

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

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

<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 上可见。

【问题讨论】：

标签： css material-ui

【解决方案1】：

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

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

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

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

【讨论】：

你需要在容器上设置一个宽度才能截断里面的文字...
这种方法对我不起作用。我不得不使用 Joel 在此线程中建议的手动 CSS / JSS 样式方法。

【解决方案2】：

建议您使用带有 textOverflow 样式的 div 包装您的 Typography 元素：“省略号”，例如：

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

【讨论】：

它的工作，因为你设置了父母的宽度！
好的，很高兴知道，感谢您的澄清！

【解决方案3】：

旧答案：

简单

以下工作，换行到下一行：

<Typography
    style={{ wordWrap: 'break-word' }}
>
    this is a long text with a verylongwordtoo
</Typography>

2021 年更新：

CSS方式

这些天我使用className如下：

JS：

<Typography
    className='textClass'
>
    this is a long text with a verylongwordtoo
</Typography>

CSS：

.textClass
{
    word-wrap: break-word;
}

此处常见错误的注意事项：

CSS 在word-wrap 中有-
break-word 周围没有单引号

样式化组件

最近，将其用作styled CSS：

JSS（css 在.js 文件中）：

const StyledTypography = styled.Typography`
    word-wrap: break-word;
`

此处常见错误的注意事项（与上面的 CSS 相同）：

CSS 在word-wrap 中有-
break-word 周围没有单引号

现在在 JS 中使用样式排版：

<StyledTypography
       className='textClass'
>
    this is a long text with a verylongwordtoo
</StyledTypography>

styled-components 更容易维护，如果我们在做 react 等，它们也会收到 props。更多可以在这里看到 - https://styled-components.com/

【讨论】：

【解决方案4】：

我是这样解决的：

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 组件本身，不如将其应用于“内部内容”。

【讨论】：

【解决方案5】：

如果你想将文本换行使用：-

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

【讨论】：