React Material UI CardHeader 标题溢出点答案

【问题标题】：React Material UI CardHeader title overflow with dotsReact Material UI CardHeader 标题溢出点
【发布时间】：2020-08-23 19:36:36
【问题描述】：

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

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

这在某种程度上是可行的，但我必须告诉类的宽度为 100 像素，直到它添加点为止。如果超出父母的宽度，我需要添加点。

【问题讨论】：

标签： javascript css reactjs material-ui

【解决方案1】：

虽然this 解决方案有效，但如果您使用mui v5，您可以使用here 描述的sx 属性来实现它。您可以设置 .MuiCardHeader-content 样式和 titleTypographyProps 属性来设置标题的样式。我添加了一个操作按钮和子标题作为额外的示例。

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;

这里是sandbox 乱搞。

【讨论】：

你拯救了我的一天。谢谢！附带说明：我们可以将sx 部分缩短为sx={{ "& .MuiCardHeader-content": { overflow: "hidden" } }}。

【解决方案2】：

问题

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

CardHeader 组件使用“root”元素和“content”元素呈现。见下文：

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

...

这是沙盒中的一个示例。

注意

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

无论如何

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

【讨论】：

你的例子有效，我可能没有。所以我尝试了一些工作，这是由于我的卡中有display: flex。有没有办法用 flex 来完成这个？看起来像 this 使用 flex。
这样你必须确保溢出应用到整个弹性树。所以应用溢出：隐藏到你的 CardHeader 根。像这样example
如果您不需要标准 CardHeader 行为作为 flex 这也可以通过 removing the standard CardHeader flex 为您服务，请使用最适合您的组件的技术。 @user13262487
非常感谢，通过使用 root: 和 content: 我可以覆盖这个特定组件的默认行为吗？
是的。我加强了答案。如果您对此主题仍有疑问，请告诉我们。

【解决方案3】：

Typography 有一个用于添加点的内置道具。您可以简单地将 noWrap 道具添加到 Typography。它将根据父组件的宽度在标题文本中添加点。

<Card className={classes.card}>
  <CardHeader
    title={
      <Typography gutterBottom noWrap variant="h6" component="h4">
        {movie.title}
      </Typography>
    }
  />
/>

【讨论】：

超出宽度