javascript - React Material UI CardHeader 标题溢出点

Question

如果卡片标题超过 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 的宽度，我需要添加点。

Answer 1

问题

据我了解，您正在限制 的大小卡 ，在这种情况下，由于 的方式，您无法放置省略号卡头 在 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>
        }
/>

...

这是沙箱中的一个示例。



注意

请注意，通过修改组件呈现方式的默认行为，可能会在整个组件树中出现一些副作用。

反正

如果您仍有任何问题，请告诉我们。