text-truncate在col中不生效，是因为它仅封装overflow:hidden、text-overflow:ellipsis、white-space:nowrap，未设宽度也不改display；而col默认为flex子项，需配合max-width或栅格类（如col-6）才能触发截断。
为什么直接加 text-truncate 在 col 里不生效
因为 text-truncate 只封装了 overflow: hidden、text-overflow: ellipsis 和 white-space: nowrap，但它不设宽度、不改 display，而 Bootstrap 的 col 默认是 flex 子项，宽度由内容撑开或 flex 规则决定。没明确的 max-width 或收缩约束，overflow: hidden 就没触发条件。
常见错误现象：<div class="col text-truncate">超长文字</div> 看起来被截了，但没省略号；或者文字换行了，还把整行撑高。
- 必须给
col加max-width（比如max-w-200或内联style="max-width: 200px"） - 若父容器是
row，需确保它没加flex-nowrap，否则子项无法收缩 -
col内部若嵌套了h1、p等，默认是块级，但依然要靠自身或父级提供宽度限制 - 在
col-6这类固定栅格下，text-truncate更容易生效——因为列宽已由栅格系统约束
col 里多行文本加省略号怎么写 CSS
Bootstrap 没提供多行 text-truncate 工具类，text-truncate 天然和多行冲突（它依赖 white-space: nowrap）。要两行或三行截断，只能手动补 -webkit-line-clamp 方案，且必须满足四个硬性条件：
-
display: -webkit-box（不能用flex或block替代） -webkit-box-orient: vertical-
-webkit-line-clamp: 2（值必须是整数） -
overflow: hidden（漏掉这个，省略号绝对不出现）
另外，col 必须有明确宽度约束：用 col-4 + max-width: 240px 比单用 col-lg-auto 可靠得多——后者会随内容伸缩，导致截断失效。
响应式断点下省略号突然消失怎么办
典型现象：在 sm 屏幕下正常显示省略号，切到 lg 就全显示出来。根本原因是栅格类在不同断点下改变了列宽，比如从 col-sm-6 变成 col-lg-12，容器变宽后不再溢出。
- 避免混用自适应类如
col-lg-auto或col-md（无数字），它们会让宽度脱离控制 - 优先用带数字的栅格类 + 显式
max-width，例如col-md-8 max-w-300 - 如果必须断点响应，写媒体查询覆盖：
.truncate-on-md { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 768px) { .truncate-on-md { max-width: 200px; } } - 检查父级
row是否加了g-0或gx-0：间隙归零有时会让col实际可用宽度变小，意外触发截断
和 title 配合时鼠标悬停没提示
不是 title 属性没写，而是 DOM 计算认为“没溢出”——即使视觉上被截断了，scrollWidth 时浏览器就不会弹 tooltip。
- 给元素加
min-width: 0（尤其在flex子项中），防止文本拒绝压缩导致宽度计算失真 - 别把
title直接写在col上，而是写在内部文本容器上，比如：<div class="col"><p class="text-truncate" title="完整文本">...</p></div> - 如果值来自 JS 动态渲染，记得
trim()后再赋给title，前后空格会导致scrollWidth计算异常 - 在
dropdown-item或card-body里使用时，先看 computed styles：父级常带padding或word-break: break-word，会干扰溢出判断
col、一个内层 div 或 p、加上定制好的截断类——而不是指望某个工具类自动适配所有布局上下文。
