Javascript 如何在物料界面设置卡片内容的固定高度？我应该使用CSS吗？

这让我快发疯了。我正在使用材质UI卡来显示新闻。然而，我有一个问题。在应该显示关于新闻文章的短消息的段落部分中，如果段落部分的内容占用两行文本，则其下方的按钮之间的间距约为10px，但如果段落部分占用3行，然后段落部分和按钮之间的填充大约为14px

这是一张你很容易理解的照片

如您所见，段落部分和“源代码和视图”部分之间的间距因行数而异。有人能给出解决方案吗？我尝试使用CSS来调整边距和填充，但它对每张卡都是如此，所以效果是一样的。我想做的是能够将段落包含在一个具有固定高度的容器中，以便“源代码和视图”部分始终保持不变

有什么建议吗

注意：下面是整个卡组件的代码片段：

<Card className={classes.newsCard} raised={true}>
                                <CardMedia
                                    component='img'
                                    height='140'
                                    src={NewsInfoArray.image}
                                    title='News Image'
                                />
                                <CardContent>
                                    <Typography className={classes.companyName}>
                                        {truncateString(NewsInfoArray.headline, 60)}
                                    </Typography>
                                    <Typography className={classes.subheader}>
                                        {truncateString(NewsInfoArray.summary, 130)}
                                    </Typography>
                                </CardContent>
                                <Grid item container direction='row' justify='space-between' spacing={3} alignItems='center'>
                                    <Grid item>
                                        <CardContent>
                                            <Typography className={classes.subheader}>
                                                Source: {NewsInfoArray.source}
                                            </Typography>
                                        </CardContent>
                                    </Grid>
                                    <Grid item >
                                        <CardActions>
                                            <Link target='_blank' rel='noopener' href={NewsInfoArray.url} underline='none'>
                                                <Button
                                                    size='large'
                                                    className={classes.styledButton}
                                                >
                                                    View
                                                </Button>
                                            </Link>
                                        </CardActions>
                                    </Grid>
                                </Grid>
                            </Card>

{truncateString（NewsInfoArray.headline，60）}
{truncateString（NewsInfoArray.summary，130）}
来源：{NewsInfoArray.Source}
看法

您是否尝试过在列方向上使用Flex Box，并将包含“源”和“视图”的行设置为“Flex end”？它没有遵循将段落包含在固定高度容器中的想法，但它会将该行始终保持在卡片的底部。

是的。输出仍然是一样的。我只是尝试了内联样式并更改了里面的文本量，看起来不管发生什么，它都会保持最下面一行的位置不变（检查第16行）