根本原因是text-truncate仅声明overflow:hidden、text-overflow:ellipsis、white-space:nowrap，依赖外部提供宽度约束和块级上下文；漏掉min-width:0（flex场景）、width/max-width、display:block等任一条件即失效。
text-truncate 为什么加了没反应
根本原因不是类写错了，而是它只做三件事：overflow: hidden、text-overflow: ellipsis、white-space: nowrap，其余全靠你补。漏掉任意一个依赖条件，就完全不生效。
常见失效场景：
- 父容器是
flex布局（比如class="d-flex"），子元素没设min-width: 0或flex-shrink: 1，文字强行撑宽，截断被跳过 - 用在
<td> 上——表格单元格默认是 <code>display: table-cell，text-truncate对它无效，得先加class="d-block" - 嵌套在
col里但没显式宽度，比如col-sm-6在小屏下可能收缩为内容宽，text-truncate因无固定width或max-width放弃截断 - 元素本身是
inline（如<span></span>），没加class="d-inline-block"或class="d-block"，块级约束缺失 -
class="text-truncate w-100"：强制占满父容器宽度，适合卡片标题、列表项等需要对齐的场景 -
class="text-truncate max-w-25"（Bootstrap 5.3+）或自定义style="max-width: 200px;"：限制最大宽度，避免在大屏下截得太早 - 配合 grid/flex 布局时，加
class="flex-shrink-1 min-w-0"，防止 flex 子项无视截断逻辑硬撑 <td class="text-truncate"> 没效果 → 改成 <code><td class="text-truncate d-block">，或外层包一层 <code><div class="text-truncate"> <li>卡片内 <code>card-title加了text-truncate仍换行 → 检查是否漏了w-100，尤其在col嵌套中；也可能是card-body的padding导致可用宽度不足，临时加pe-0缩减右内边距- 响应式列（如
col-md-8）下截断失效 → 说明该列未获得稳定宽度，可加flex: 0 0 auto或改用col-8强制栅格宽度 - CSS 原生（WebKit 内核）：
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: 2+overflow: hidden—— Safari 17+ 和 Chrome 支持良好，Firefox 全版本不支持 - JS 回退：监听元素
scrollHeight > clientHeight * 1.8，再用textContent截字 + 插入"…"，但要注意中英文混排、emoji、全角标点导致的视觉长度偏差，不能简单按字符数切
text-truncate 必须搭配的宽度控制方式
text-truncate 不带任何宽度声明，这是设计使然，也是最容易踩的坑。它只管“怎么截”，不管“截多宽”。你得手动给它锚定边界。
推荐组合（任选其一）：
别用 vw 或百分比值直接写在 style 里——某些移动端 WebView 对动态视口单位解析不稳定，优先用 Bootstrap 内置宽度工具类。
text-truncate 在表格和卡片里的典型失灵点
表格单元格和卡片组件自带样式约束，常和 text-truncate 冲突。
具体表现与对策：
想截两行？text-truncate 不行，得换方案
text-truncate 是单行专用，硬套在多行容器上只会让文字堆成一团或直接溢出，不会出现省略号。
真要两行截断，目前只有两条路：
没有银弹。如果你的用户群 Firefox 占比高，或者项目要求严格兼容，就老老实实放弃多行省略号，改用展开/收起交互，或者允许自然换行 + text-break 处理长单词。
