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

ncecgwcz 于 2023-05-02 发布在其他

关注(0)|答案(6)|浏览(192)

我想创建一个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。这个问题在Chrome和Firefox上都是可见的。

css

来源：https://stackoverflow.com/questions/53221621/how-to-wrap-or-truncate-long-strings-in-a-material-ui-expansionpanelsummary

6条答案

按热度按时间

ybzsozfc1#

官方文档：https://material-ui.com/api/typography/
noWrap：如果为true，则文本不会换行，而是使用文本溢出省略号截断。请注意，文本溢出只能发生在块或内联块级别的元素中（元素需要有宽度才能溢出）。
注意'noWrap'中的大写'W'。

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

赞(0）回复(0）举报 2023-05-02

tcomlyy62#

建议你用一个div Package 你的Typography元素，这个div的样式是textOverflow：“省略号”，例如：

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

赞(0）回复(0）举报 2023-05-02

hc8w905p3#

我是这样解决的：

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

赞(0）回复(0）举报 2023-05-02

bt1cpqcv4#

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

赞(0）回复(0）举报 2023-05-02

u3r8eeie5#

〈Box component=“div”wordWrap：'break-word！important' width=' 80%'} lineHeight='1.Lorem，ipsum dolor sit amet consectetur adipisicing elit.

赞(0）回复(0）举报 2023-05-02

x7yiwoj46#

如果你想将文本换行，请用途：-

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

赞(0）回复(0）举报 2023-05-02

我来回答

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

6条答案

相关问题

热门标签

最新问答