.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 不提供开箱即用的“单行省略”工具类，得组合使用或自定义。最稳妥的做法是：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 给 .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></svg>、绝对定位弹层）穿出列边界。常见踩坑点：

• .col 必须有明确高度或最大高度，例如 h-100 + 父 .row 设 height: 300px，否则 overflow-hidden 对垂直溢出无感
• 如果子元素是 position: absolute，它会脱离文档流，overflow-hidden 无法裁剪——得改用 position: relative 或把绝对定位元素移出 .col DOM
• 图片用 .card-img-top 时，单独加 overflow-hidden 到 .col 没用；应加在 .card 上，并确保 .card 有 overflow: hidden 和明确尺寸
• 慎用 table-layout: fixed 套在栅格内表格上——它会让 .col 内表格强行等分宽度，反而放大溢出风险

真正起作用的从来不是某个 class 名字，而是「有没有明确尺寸 + 是否创建了新的块格式化上下文」。很多人调半天 overflow-hidden 没效果，最后发现只是忘了给父容器加 height 或 max-width。