Bootstrap Card文本溢出问题：如何阻止浏览器缩小时内容溢出？

嘿，这个问题我之前做项目时也遇到过！当浏览器高度缩小，Bootstrap卡片里的文本就往外跑，其实通过几个简单的CSS调整就能解决，给你分享几种实用的方案：

默认情况下，Bootstrap的card-body没有高度限制和溢出处理，所以当内容过长且容器高度不足时就会溢出。我们可以给card-body设置最大高度，并开启垂直滚动：

.card-body {
  /* 根据你的卡片布局调整这个值，比如减去header、footer的高度 */
  max-height: calc(100vh - 200px);
  /* 内容超过高度时显示垂直滚动条 */
  overflow-y: auto;
}

这样设置后，当文本高度超过card-body的最大限制时，会自动出现滚动条，文本就不会溢出卡片了。

Bootstrap自带overflow-auto类，我们可以直接给card-body加上这个类，再配合自定义的最大高度，既符合Bootstrap的设计规范，又能快速解决问题：

<div class="card" style="width: 18rem;">
  <div class="card-header">卡片标题</div>
  <div class="card-body overflow-auto" style="max-height: 300px;">
    这里是你的长文本内容，当高度超过300px时会自动出现滚动条，再也不会溢出卡片啦！
    <!-- 更多长文本... -->
  </div>
</div>

如果希望卡片整体适配浏览器视口高度，比如在移动端让卡片占满大部分屏幕，可以用Bootstrap的flex布局类来实现：

<!-- 外层容器占满视口高度 -->
<div class="d-flex flex-column vh-100">
  <div class="card flex-fill">
    <div class="card-header">自适应高度卡片</div>
    <!-- card-body自动填充剩余空间，溢出时滚动 -->
    <div class="card-body overflow-auto flex-fill">
      这里是你的长文本内容，卡片会自动适配视口高度，内容过长时内部滚动，不会溢出卡片。
      <!-- 更多长文本... -->
    </div>
    <div class="card-footer">卡片页脚</div>
  </div>
</div>

额外小提示 #

• 调整max-height时，记得考虑卡片的header、footer等其他部分的高度，避免内容被遮挡；
• 如果需要响应式适配不同屏幕高度，可以用CSS媒体查询：

/* 当视口高度小于576px时调整最大高度 */
@media (max-height: 576px) {
  .card-body {
    max-height: calc(100vh - 150px);
  }
}

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