javascript - React Material UI CardHeader title overflow with dots - Stack Overflow

admin管理员组

文章数量:1206765

How can I properly add dots the the title in my Cardheader if it exceeds the parents width (Card width). So far I have done this:

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

This works in a way, but I have to tell the class to have a width of 100px until it adds the dots. I need to add the dots if it exceeds the parents width.

How can I properly add dots the the title in my Cardheader if it exceeds the parents width (Card width). So far I have done this:

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

This works in a way, but I have to tell the class to have a width of 100px until it adds the dots. I need to add the dots if it exceeds the parents width.

• javascript
• css
• reactjs
• material-ui

Share Improve this question Follow edited May 9, 2020 at 12:58 Jairon Alves Lima 32322 silver badges55 bronze badges asked May 8, 2020 at 9:17 user13262487user13262487 20933 silver badges1414 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 10

Although this solution works, if you are using mui v5, this is how you can do it using the sx prop described here. You can set the .MuiCardHeader-content style and titleTypographyProps prop to style the title. I added an action button and subheader as an extra example.

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;

Here's the sandbox to mess around with.

Problem

As I understand it you are limiting the size of the Card, in this case, you are not being able to place the ellipsis due to the way the CardHeader is rendered in the html.

The CardHeader component is rendered with a "root" element and a "content" element. See below:

Typography has a built-in prop to adding dots noWrap. For the noWrap property to work correctly, we have the following approaches.

Solution 1

CardHeader's default behavior is to use flex. If you don't need it use 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>
        }
/>
...

Solution 2

If you need to keep CardHeader with flex behavior, in this case, the overflow needs to be applied to the root and content. To reach the elements use the CardHeader classes property passing the generated class to the 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>
        }
/>

...

Here's an example in the sandbox.

Atention

Be aware that by modifying the default behavior of how components are rendered, some side effects may occur in your entire component tree.

Anyway

If you still have any problems let us know.

Typography has a built-in prop to adding dots. You can simply add noWrap prop to Typography. It will add dots in header text and according to the parent component width.

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

本文标签： javascriptReact Material UI CardHeader title overflow with dotsStack Overflow