Bootstrap 5仅提供6个基础overflow工具类（如overflow-auto、overflow-hidden），不支持断点修饰，且对绝对定位、Flex子项等场景常失效，需配合显式宽高、布局调整及手写CSS才能解决实际溢出问题。
Bootstrap 本身没有提供专门的 overflow 工具类（如 overflow-clip 或 overflow-auto-sm），它的 overflow 相关类极其有限，仅支持基础响应式控制，且在 v5.3+ 中仍无断点级细分 —— 别指望靠加个 class 就解决卡片文字撑破容器、绝对定位溢出或移动端文本截断这类实际问题。
Bootstrap 的 overflow 类到底有哪些
Bootstrap v5.x 仅内置以下 6 个 overflow 工具类，全部作用于当前元素自身，**不支持媒体查询断点修饰**：
-
overflow-auto：内容超出时显示滚动条（含横向/纵向） -
overflow-hidden：直接裁剪溢出部分，不保留滚动能力 -
overflow-visible：默认行为，内容可溢出容器边界 -
overflow-scroll：强制显示滚动条（即使内容未溢出） -
overflow-x-*/overflow-y-*：仅控制单方向（* = auto|hidden|visible|scroll）
注意：overflow-wrap、word-break、text-overflow 等文本截断相关属性，Bootstrap 不提供对应工具类，必须手写 CSS。
为什么 overflow-hidden 经常失效
常见于卡片、服务列表等场景：加了 overflow-hidden 却依然看到文字或图标溢出。根本原因不是类没生效，而是它只对「处于文档流内」的子元素起作用。一旦子元素用了 position: absolute 或 transform，就脱离了父容器的溢出裁剪上下文。
- 删掉父容器上多余的
position: relative+ 子元素position: absolute组合 —— 这是溢出失控的头号元凶 - 若必须用绝对定位，需确保父容器有明确的
height且设为position: relative，否则overflow-hidden对绝对定位子元素无效 - Flex/Grid 容器中，
overflow-hidden对子项生效的前提是子项未设置min-width: 0或min-height: 0—— 否则弹性项会拒绝收缩
响应式文本截断得自己补 CSS
Bootstrap 不提供 text-truncate 的多行版本（如「显示两行后省略」），也不支持根据屏幕尺寸切换截断策略。要实现真正可用的响应式卡片内容防护，必须补充：
.card-text-clamp {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
<p>@media (max-width: 768px) {
.card-text-clamp {
-webkit-line-clamp: 1;
}
}同时注意：该方案依赖 -webkit-box，Firefox 需额外加 display: block; height: 3.6em; line-height: 1.8em; 模拟两行截断，且无法处理中英文混排时的断行异常。
别把 Bootstrap 当成 overflow 问题的解药
它的 overflow 类只是 CSS 原生属性的薄封装，既不智能也不自适应。真实项目里最常被忽略的是：溢出从来不是孤立样式问题，而是布局模型（Flex/Grid vs float/absolute）、盒模型（box-sizing）、文本渲染（white-space、hyphens）和响应式断点共同作用的结果。想靠几个 class 摆平，反而容易掩盖底层结构缺陷。
