Bootstrap 5带标题的卡片文本页面缩放时溢出无法响应适配如何解决

问题根因 #

文本溢出是因为h1默认使用固定字号，页面缩放时卡片宽度会自适应缩小，但文本字号没有同步适配，当字号超过卡片可用宽度就会出现溢出。另外你代码里的bold类不符合Bootstrap 5规范，正确的加粗类应为fw-bold。

可落地解决方案 #

你可以根据实际需求选择以下任意一种或组合使用：

• 响应式字号适配：使用Bootstrap 5自带的分级响应式字号类，给文本配置不同视口下的字号，自动适配容器尺寸，同时给文本外层容器加px-2水平内边距避免文字贴边。
• 文本溢出兜底：允许换行的场景给h1加text-wrap类强制自动换行；需要单行显示的场景加text-truncate类，溢出部分自动显示为省略号。
• 限制卡片最小宽度：给外层card容器添加最小宽度限制，避免卡片被缩放至过小尺寸，从根源避免文本放不下的问题。

修改后代码示例 #

<div class="card bg-white" style="min-width: 280px;">
  <div class="align-items-center d-flex justify-content-center my-3 px-2">
    <h1 class="text-primary fw-bold fs-md-1 fs-3 text-wrap">INFORMACIÓN</h1>
  </div>
</div>

效果参考 #

缩放前正常显示：

原缩放后溢出效果：

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