如果卡片标题超过 parent 宽度(卡片宽度),我该如何正确添加点。到目前为止,我已经这样做了:
card: {
width: 275,
display: "flex"
},
overflowWithDots: {
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
overflow: 'hidden',
width: '100px'
}
<Card className={classes.card}>
<CardHeader
title={
<Typography gutterBottom variant="h6" component="h4" className={classes.overflowWithDots}>
{movie.title}
</Typography>
}
/>
这在某种程度上是可行的,但我必须告诉类(class)宽度为 100 像素,直到它添加点为止。如果超出 parent 的宽度,我需要添加点。
最佳答案
问题
据我了解,您正在限制 的大小卡 ,在这种情况下,由于 的方式,您无法放置省略号卡头 在 html 中呈现。
卡头 组件使用“ 根 ”元素和“ 内容 ”元素呈现。见下文:
排版 具有添加点的内置 Prop noWrap .对于 noWrap 属性要正常工作,我们有以下方法。
解决方案 1
CardHeader 的默认行为是使用 flex。如果您不需要它,请使用 flex:
...
cardHeader: {
display: "block",
overflow: "hidden"
}
...
<CardHeader
className={classes.cardHeader}
title={
<Typography noWrap gutterBottom variant="h6" component="h4">
A world wide web - the revolution
</Typography>
}
/>
...
解决方案 2
如果您需要保持 CardHeader 具有 flex 行为,在这种情况下,溢出 需要申请根和 内容 .要到达元素,请使用 CardHeader classes property将生成的类传递给内容 Prop 。
...
cardHeaderRoot: {
overflow: "hidden"
},
cardHeaderContent: {
overflow: "hidden"
}
...
<CardHeader
classes={{
root: classes.cardHeaderRoot,
content: classes.cardHeaderContent
}}
title={
<Typography noWrap gutterBottom variant="h6" component="h4">
A world wide web - the revolution
</Typography>
}
/>
...
这是沙箱中的一个示例。
注意
请注意,通过修改组件呈现方式的默认行为,可能会在整个组件树中出现一些副作用。
反正
如果您仍有任何问题,请告诉我们。
关于javascript - React Material UI CardHeader 标题溢出点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61675880/