如何确保Bootstrap 3卡片盒子不受文本量影响保持统一高度？

方法一：固定文本区域高度并截断 #

针对卡片内的描述文本，通过CSS设置固定高度，超出部分自动隐藏并显示省略号，确保所有卡片高度一致：

1. 给描述文本容器添加自定义类，比如fixed-height-desc
2. 编写CSS样式：

.fixed-height-desc {
  height: 120px; /* 根据需求调整，保证所有卡片该区域高度相同 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6; /* 指定显示的行数 */
  -webkit-box-orient: vertical;
}

3. 更新HTML中的描述容器：

<div class="thumbnail-description smaller fixed-height-desc" v-html="card.description"></div>

方法二：Flex布局实现整体卡片等高 #

如果希望整个卡片（包括标题、描述、底部操作栏）完全等高，可借助Flex布局：

1. 给每个卡片的父容器（col-sm-4）添加自定义类flex-card-wrap
2. 编写CSS样式：

.flex-card-wrap {
  display: flex;
  flex-direction: column;
}
.flex-card-wrap .thumbnail {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.flex-card-wrap .caption:first-child {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.flex-card-wrap .thumbnail-description {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

3. 修改HTML结构：

<div class="col-sm-4 flex-card-wrap" v-for="(card, index) in cards">

补充说明 #

• -webkit-line-clamp仅兼容webkit内核浏览器，如需全面兼容，可配合JavaScript实现文本截断
• 调整高度或行数时，建议结合Bootstrap响应式类，适配不同屏幕尺寸的显示效果

内容的提问来源于stack exchange，提问作者Vzupo