我正在使用Material-UI,并试图将省略号应用于CardHeader中的底层Typography组件,但将noWrap传递到titleTypographyProps似乎不起作用。我需要以某种方式覆盖CardHeader吗?我尝试在CardHeader和底层Typography组件上设置max-width: 100%,但没有成功。演示
Material-UI
CardHeader
noWrap
titleTypographyProps
Typography
max-width: 100%
vlf7wbxs1#
问题出在MuiCardHeader-content flex。你需要给予它一个宽度,这样它就可以在其父节点中显示自己。
MuiCardHeader-content
.MuiCardHeader-content { flex: 1 1 auto; width: 100%; }
7vux5j2d2#
为了扩展@Awais的答案,如果你用下面的代码覆盖头部的内容CSS类:
content { display: contents }
即使你使用了图标,它也会使你的标题正确地处理省略号。
mm9b1k5b3#
我在使用flex时遇到了一个问题,因为我有一个avatar和一个action icon。因此,在尝试了不同的方法后,这对我来说是有效的:尝试将此代码添加到CardHeader组件
avatar
action icon
sx={{ '& .MuiCardHeader-content': { display: 'block', overflow: 'hidden', }, }} titleTypographyProps={{ noWrap: true, textOverflow: 'ellipsis', }}
3条答案
按热度按时间vlf7wbxs1#
问题出在
MuiCardHeader-content
flex。你需要给予它一个宽度,这样它就可以在其父节点中显示自己。7vux5j2d2#
为了扩展@Awais的答案,如果你用下面的代码覆盖头部的内容CSS类:
即使你使用了图标,它也会使你的标题正确地处理省略号。
mm9b1k5b3#
我在使用flex时遇到了一个问题,因为我有一个
avatar
和一个action icon
。因此,在尝试了不同的方法后,这对我来说是有效的:尝试将此代码添加到
CardHeader
组件