Question

145

React Material UI CardHeader title overflow with dots

rated 0 times [ 150] [ 5] / answers: 1 / hits: 6321 / 4 Years ago, fri, may 8, 2020, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

davion

Add To Favorites

Follow

Total Points: 458

Total Questions: 109

Total Answers: 100

Location: Taiwan

Member since Mon, Sep 6, 2021

3 Years ago

davion questions

1 'rollup' is not recognized as an internal or external command

Fri, Oct 1, 21, 00:00, 3 Years ago

1 How to add your own custom css to override react-confirm-alert defaults

Wed, Jan 13, 21, 00:00, 3 Years ago

1 Module build failed Cannot find module '@babel/preset-env'

Tue, May 19, 20, 00:00, 4 Years ago

1 How to use createStackNavigator in React Native?

Mon, May 4, 20, 00:00, 4 Years ago

1 Return back to first slide when carousel reaches last

Fri, Jan 10, 20, 00:00, 4 Years ago

View All

answered 4 Years ago loric · Accepted Answer

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.