React Material UI CardHeader 标题溢出点

Question

如果超出父母宽度（卡片宽度），我如何在卡片标题中正确添加点。到目前为止，我已经这样做了：

  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>
       }
   />

这在某种程度上起作用，但我必须告诉类具有 100px 的宽度，直到它添加点。如果超过父母的宽度，我需要添加点。

Answer 1

尽管此解决方案有效，但如果您使用的是 mui v5，则可以使用此处sx描述的 prop来实现此目的。您可以设置style 和prop 来设置标题的样式。我添加了一个操作按钮和副标题作为额外的示例。.MuiCardHeader-contenttitleTypographyProps

import React from "react";
import { Card, CardHeader, IconButton } from "@mui/material";
import { MoreVert as MoreVertIcon } from "@mui/icons-material";

const SimpleCard = () => (
  <Card sx={{ width: "275px", display: "flex" }}>
    <CardHeader
      sx={{
        display: "flex",
        overflow: "hidden",
        "& .MuiCardHeader-content": {
          overflow: "hidden"
        }
      }}
      title={"A very long title coooooooooooooool"}
      titleTypographyProps={{ noWrap: true }}
      subheader={"ps long subheader cooooooooooooool"}
      subheaderTypographyProps={{ noWrap: true }}
      action={
        <IconButton>
          <MoreVertIcon />
        </IconButton>
      }
    />
  </Card>
);

export default SimpleCard;

这是可以乱搞的沙箱。

Answer 2

问题

据我了解，您正在限制Card的大小，在这种情况下，由于CardHeader在 html 中的呈现方式，您无法放置省略号。

所述CardHeader部件呈现与“根”元素和“内容”元素。见下文：

排版有一个内置的道具来添加点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 行为，在这种情况下，需要将溢出应用于root和content。要访问元素，请使用CardHeader classes 属性将生成的类传递给 content 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>
        }
/>

...

这是沙箱中的一个示例。

关注

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

反正

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