.col加overflow-hidden无效，因其作为flex子项无明确宽高，浏览器无法判定溢出边界；需配合显式宽度（如col-6）及text-truncate（含white-space: nowrap、overflow: hidden、text-overflow: ellipsis）才能实现文字单行截断。
overflow-hidden 在 bootstrap 栅格系统中直接加在 .col 或 .row 上基本无效——它只裁剪自身盒模型边界内的内容，而栅格项默认是弹性布局中的“无约束子项”，没有明确宽高时，overflow 完全不触发。
为什么 .col 加了 overflow-hidden 却不截断文字？
根本原因是：Bootstrap 的 .col 是 flex 子项，默认不设 width，浏览器无法确定“溢出”从哪开始。即使你写了 class="col overflow-hidden"，只要父 .row 没有 flex-wrap: nowrap 或子项没强制宽度，文本仍会换行或撑开容器。
- 检查是否误把
overflow-hidden加在.row上——.row默认是display: flex，但它的高度由子项撑开，没固定高就无法裁剪 -
.col必须配合显式宽度控制，比如flex: 0 0 25%（即col-3）或width: 200px，否则overflow-hidden形同虚设 - 文字溢出截断还需额外三件套：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis，仅overflow-hidden不够
想让 .col 内文字单行截断，该加哪些类？
Bootstrap 5 不提供开箱即用的“单行省略”工具类，得组合使用或自定义。最稳妥的做法是：
- 给
.col加text-truncate（Bootstrap 5+ 内置）——它等价于overflow: hidden; text-overflow: ellipsis; white-space: nowrap - 确保该
.col有宽度约束：比如用col-6、col-md-4，或内联style="max-width: 200px" - 避免父级
.row有flex-wrap: wrap并且内容过长——这时文字可能折到第二行，text-truncate失效 - 若需响应式截断（小屏截、大屏不截），可配合
d-none d-md-block控制不同断点下的text-truncate
用 overflow-hidden 隐藏整列溢出内容（比如图片/卡片）
这时候重点不是文字，而是防止子元素（如 <img>、<svg>、绝对定位弹层）穿出列边界。常见踩坑点：
-
.col必须有明确高度或最大高度，例如h-100+ 父.row设height: 300px，否则overflow-hidden对垂直溢出无感 - 如果子元素是
position: absolute，它会脱离文档流，overflow-hidden无法裁剪——得改用position: relative或把绝对定位元素移出.colDOM - 图片用
.card-img-top时，单独加overflow-hidden到.col没用；应加在.card上，并确保.card有overflow: hidden和明确尺寸 - 慎用
table-layout: fixed套在栅格内表格上——它会让.col内表格强行等分宽度，反而放大溢出风险
真正起作用的从来不是某个 class 名字，而是「有没有明确尺寸 + 是否创建了新的块格式化上下文」。很多人调半天 overflow-hidden 没效果，最后发现只是忘了给父容器加 height 或 max-width。
