Bootstrap固定高度缩略图中标题文本适配问题求助

嘿，我懂你的困扰——固定高度的缩略图容器里，标题文本要么撑得容器变形，要么显示不全对吧？咱们来调整一下CSS布局，让标题乖乖待在容器里，同时保持所有缩略图高度完全一致。

核心思路：用Flex布局合理分配空间 #

把缩略图容器改成flex垂直布局，让图片和标题区域自动分配高度，同时处理标题文本的溢出问题，具体代码调整如下：

自定义CSS代码

.thumbnail {
  height: 350px;
  display: flex;
  flex-direction: column; /* 让内部元素垂直排列 */
}

.thumbnail img {
  height: 256px;
  width: 256px;
  margin: 0 auto; /* 让图片在容器里居中显示 */
}

.thumbnail .caption {
  flex: 1; /* 占据缩略图容器除图片外的所有剩余高度 */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 让标题和底部按钮上下分开，按钮始终固定在底部 */
  padding: 9px; /* 保留Bootstrap默认的内边距样式 */
}

.thumbnail .caption h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 最多显示2行标题，超出部分自动变成省略号 */
  -webkit-box-orient: vertical;
  margin-top: 0; /* 去掉默认的顶部外边距，节省容器内空间 */
}

完整的HTML示例

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.thumbnail {
  height: 350px;
  display: flex;
  flex-direction: column;
}

.thumbnail img {
  height: 256px;
  width: 256px;
  margin: 0 auto;
}

.thumbnail .caption {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 9px;
}

.thumbnail .caption h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 0;
}

.thumbnail .caption .btn {
  align-self: flex-start; /* 按钮左对齐，可根据需求改成center或flex-end */
}
</style>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="thumbnail">
        <img src="https://via.placeholder.com/256" alt="示例图片">
        <div class="caption">
          <h3>这是一个比较长的测试标题，用来验证是否会被自动省略处理</h3>
          <p>简短的描述内容</p>
          <p><a href="#" class="btn btn-primary" role="button">查看详情</a></p>
        </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-4 col-md-3">
      <div class="thumbnail">
        <img src="https://via.placeholder.com/256" alt="示例图片">
        <div class="caption">
          <h3>短标题</h3>
          <p>简单描述</p>
          <p><a href="#" class="btn btn-primary" role="button">查看详情</a></p>
        </div>
      </div>
    </div>
  </div>
</div>

效果说明 #

1. 所有缩略图都会严格保持350px的固定高度，不会因为标题长度不同而变形错位。
2. 标题最多显示2行，超出部分会自动变成省略号，既保证内容完整性又不破坏布局。
3. 底部的按钮始终固定在缩略图底部，不会因为标题长短而上下移动。

如果不需要限制标题行数，只需要去掉标题的溢出处理代码，.caption的flex布局依然会让标题区域填充剩余空间，自动换行但绝不会撑破容器。

内容的提问来源于stack exchange，提问作者Below the Radar