reactjs 如何在Material UI CardHeader中对标题应用省略号

a64a0gku  于 2023-05-06  发布在  React
关注(0)|答案(3)|浏览(126)

我正在使用Material-UI,并试图将省略号应用于CardHeader中的底层Typography组件,但将noWrap传递到titleTypographyProps似乎不起作用。
我需要以某种方式覆盖CardHeader吗?我尝试在CardHeader和底层Typography组件上设置max-width: 100%,但没有成功。
演示

vlf7wbxs

vlf7wbxs1#

问题出在MuiCardHeader-content flex。你需要给予它一个宽度,这样它就可以在其父节点中显示自己。

.MuiCardHeader-content {
    flex: 1 1 auto;
    width: 100%;
}
7vux5j2d

7vux5j2d2#

为了扩展@Awais的答案,如果你用下面的代码覆盖头部的内容CSS类:

content {
    display: contents
}

即使你使用了图标,它也会使你的标题正确地处理省略号。

mm9b1k5b

mm9b1k5b3#

我在使用flex时遇到了一个问题,因为我有一个avatar和一个action icon。因此,在尝试了不同的方法后,这对我来说是有效的:
尝试将此代码添加到CardHeader组件

sx={{
      '& .MuiCardHeader-content': {
          display: 'block',
          overflow: 'hidden',
       },
    }}

    titleTypographyProps={{
      noWrap: true,
      textOverflow: 'ellipsis',
    }}

相关问题