text-truncate失效的根本原因是未同时满足三个条件：容器有明确宽度、元素为块级上下文、父容器允许内容收缩；它仅封装overflow:hidden、text-overflow:ellipsis、white-space:nowrap，不处理宽度与布局约束。
text-truncate 类加了没反应？不是类坏了，是它根本没被触发——它只在三个条件同时满足时才显示省略号：容器有明确宽度、元素是块级上下文、父容器允许内容收缩。
为什么 text-truncate 加了却没省略号
它只是 overflow: hidden + text-overflow: ellipsis + white-space: nowrap 的快捷写法，不带宽度、不改 display、也不管 flex 布局是否锁死子项。常见失效点：
- 直接用在
<span>上 →span是 inline 元素，text-overflow不生效；得加class="d-inline-block"或换成<div> - 放在
<td>里 → 默认display: table-cell，不支持text-overflow；需显式加class="d-block" - 嵌在 Flex 容器中 → 子项默认
min-width: auto，文字撑开宽度，截断逻辑跳过；必须加class="min-w-0"（Bootstrap 5.3+）或style="min-width: 0" - 父容器用了
col但没指定尺寸（如只写col没写col-8）→ 列宽不确定，overflow: hidden无从判断边界
Flex 布局里 text-truncate 怎么配才可靠
Flex 引擎先算尺寸，CSS 截断只是最后一步。不释放子项的收缩能力，text-truncate 就是摆设：
- 最轻量解法：给目标元素加
class="min-w-0 text-truncate"（Bootstrap ≥5.3） - 兼容旧版：加
style="min-width: 0"再套text-truncate - 别写
flex-shrink: 0在父容器上——这等于给子项上锁 - 避免混用
text-truncate和h-50：行高估算不准时，第二行下半部分可能被硬裁掉
想截两行？text-truncate 行不通，得换方案
Bootstrap 官方不提供多行截断类。text-truncate 硬套在 <p> 上只会让第一行被截半，或完全没反应：
立即学习“前端免费学习笔记（深入）”；
- WebKit 方案（Chrome/Safari/Edge 16+）：用
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: 2+overflow: hidden - 必须保留
overflow: hidden，否则第三行内容会漏出来 - 不能设
height，建议用max-height配合行高估算（如line-height: 1.5× 2 =max-height: 3rem） - Firefox 全版本不支持
-webkit-line-clamp；如需兼容，只能 JS 回退：监听容器高度，测量scrollHeight>clientHeight后动态截字符串
title 属性为啥悬停没提示
它只在 scrollWidth > offsetWidth 时触发。视觉上被截断 ≠ DOM 认为溢出：
- Flex 子项缺
min-width: 0→ 宽度计算偏大，scrollWidth不超限，title不弹 - 父容器设了
flex-shrink: 0或min-width: unset→ 同样导致宽度判定失效 - 中英文混排、emoji、全角标点会影响字体度量，实际截断位置可能偏移一两个字符——这不是 bug，是渲染引擎行为
真正卡住人的从来不是怎么写 CSS，而是搞不清「谁在控制宽度」：Flex 布局下是 flex 引擎，表格里是 table-layout，响应式栅格里是 col 类的断点逻辑。漏掉其中任一环，text-truncate 就只是三行无效声明。
