text-truncate类本身不生效，因其仅包含overflow: hidden、text-overflow: ellipsis、white-space: nowrap三条声明，缺宽度、块级显示或父容器约束（如Flex中未设min-width: 0）即失效；不支持<td>和内联元素，且仅限单行截断。
text-truncate 类本身不会自动生效，它只是一组 CSS 声明的快捷写法，缺了宽度、显示模式或父容器约束，就完全没反应。
为什么加了 text-truncate 却没省略号
最常见原因是：元素没设宽度，或者不是块级上下文。Bootstrap 的 text-truncate 只包含三条规则：overflow: hidden、text-overflow: ellipsis、white-space: nowrap，它不提供 width、max-width，也不改 display。
- 直接用在
<span>或未设display的内联元素上 → 无效（必须是block或inline-block） - 父容器是 Flex 布局，子项没加
min-width: 0→ 内容强行撑宽，截断不触发 - 用在
<td>上 → 默认display: table-cell，text-overflow不支持，得先加style="display: block"或换方案 - 写了
text-truncate但忘了父级有overflow: hidden→ 实际起作用的是父级的隐藏，不是这个类（注意：这里不是说父级要设，而是说如果你自己加了父级overflow: hidden，可能和子级冲突）
text-truncate 在 Flex 容器里怎么用才可靠
Flex 子项默认会尽可能伸展（flex-shrink: 1 但 min-width: auto），导致文字撑开容器，text-overflow 失效。必须显式释放收缩能力。
- 子项加
flex-shrink-1（对应flex-shrink: 1） +min-w-0（对应min-width: 0） - 再叠加
text-truncate，三者缺一不可 - 如果还用了
w-100或max-w-50等宽度类，优先级要确认——Bootstrap 的响应式宽度类权重高于text-truncate，一般没问题 - 避免同时设
flex-shrink-0，那等于锁死宽度，截断永远不会发生
想截两行以上？别硬套 text-truncate
Bootstrap 5 没有多行省略号工具类。text-truncate 是单行专用，强行加 h-50 或 line-clamp 混搭，大概率导致文字被切掉半行、高度计算错乱，或 Firefox 下完全失效。
- 原生方案只有
-webkit-line-clamp，但 Firefox 全版本不支持，Safari 17+ 才开始有限支持 - 若需兼容 Firefox，得用 JS 方案（如
clamp.js）或服务端截断 + 提示“展开” - 表格中多行截断更麻烦：
<td>不支持-webkit-line-clamp，只能转成div布局再处理 - 别用
word-break: break-word替代——它是为防长单词溢出设计的，和行数无关
真正卡住人的往往不是语法，而是 display 模式、Flex 收缩行为、父容器 overflow 设置这三者的隐式交互。调的时候先查 computed styles，看 white-space 和 overflow 是否真被应用，比反复加类更省时间。
