I'm facing an issue with creating a Material UI card that contains text. My goal is to set a fixed height for the card and truncate the text if it exceeds 3 lines. Can anyone suggest the best approach to achieve this?
Here's the code snippet I've been working on. I attempted using CSS to truncate the text, but I encountered two problems: the ellipsis doesn't display, and the overflow cuts off the text horizontally. Ideally, I'd like to set the truncation based on multiples of the line height rather than in pixels. Additionally, I need it to still function properly when the screen size changes.
import React from 'react';
// Material UI
import {
Card,
CardActionArea,
CardContent,
CardMedia,
makeStyles,
Typography,
} from '@material-ui/core';
const useStyles = makeStyles(theme => ({
media: {
height: 140,
},
title: {
height: 50,
overflow: 'hidden',
textOverflow: 'ellipsis',
},
description: {
height: 50,
overflow: 'hidden',
textOverflow: 'ellipsis',
},
}));
const ContentThumbnail = ({ image, title, description, date }) => {
const classes = useStyles();
return (
<Card>
<CardActionArea>
<CardMedia
image={image}
title=""
className={classes.media}
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2" className={classes.title}>
{title}
</Typography>
<Typography variant="body2" component="p" className={classes.description}>
{description}
</Typography>
</CardContent>
</CardActionArea>
</Card>
);
};
export default ContentThumbnail;