如何使用flexbox实现React-Bootstrap卡片等高且溢出文本完整隐藏

AI 小北

2026-10-5

解决React Bootstrap电影卡片文本溢出、半截显示问题

问题原因

固定高度的卡片未启用flex布局，内部内容无法自动分配空间，导致整体溢出
描述文本仅设置了overflow: hidden，没有做行数截断，会出现半截文字被裁剪的情况
文本容器没有限制高度，会把底部按钮挤出卡片区域

修改方案

第一步：调整卡片基础布局CSS

给固定高度的卡片容器启用flex布局，让内部元素自动分配空间：

.cardClass {
    max-width: 100%;
    height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

第二步：调整内容区高度分配

让Card.Body占满图片以外的剩余高度，内部文本容器撑满内容区：

.card-body {
    font-weight: 400;
    flex: 1;
    overflow: hidden;
}
.card-text-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
}

第三步：给描述文本加行数截断，避免半截显示

使用-webkit-line-clamp属性指定最多显示行数，超出自动隐藏，还可以加省略号优化显示效果：

.card-description {
    font-size: 13px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 可根据实际布局调整显示行数，比如3行、4行 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis; /* 可选，超出部分末尾显示省略号 */
    margin-bottom: 10px;
}