代码之家 › 专栏 › 技术社区 › Shorn

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

material-ui css

Shorn · 技术社区 · 6 年前

我想创建一个 ExpansionPanel 其中摘要可能是一个相当长的连续字符字符串(即,没有连字符,没有空格)。

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

这是我的示例,来自 ExpansionPanel 材料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" }} 到 (参见链接示例中的第二个示例)。

理想情况下,我希望它能够从上下文右侧截断,显示省略号,而不是覆盖展开图标。
我该怎么做 扩展面板 ?

如果做不到这一点,我怎么能强迫它自动换行呢?

我使用的是MaterialUI v3.4.0,这个问题在Chrome和Firefox上都可以看到。

1 回复 | 直到 6 年前

Supun Praneeth 4 年前

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

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

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

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

Joel Stevick 5 年前

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

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

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

Kelsey Hannan 2 年前

包裹( 不使用椭圆截断)材质/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助手可以方便地根据屏幕宽度缩小文本。

-2

Subhash Saini 4 年前

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

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