text-truncate不生效八成漏了三样：容器无明确宽度、元素非block/inline-block显示模式、未限制单行（white-space: nowrap虽已包含，但display和width缺失导致其失效）。
text-truncate不生效，八成漏了这三样
加了 text-truncate 却没省略号？不是类写错了，而是它只封装了三条 CSS： overflow: hidden、text-overflow: ellipsis、white-space: nowrap —— 但**不设宽度、不改显示模式、不锁单行容器**，这三条就全白搭。
必须同时满足：
-
display是block或inline-block（span、td、a这类默认行内或 table-cell 的元素直接加会失效） - 容器有明确的
width或max-width（col类没写具体断点如col-6，或只写col，宽度就不确定） - 不能被父容器的 flex 行为“撑开”（比如子项没设
min-w-0，或父容器设了flex-shrink: 0）
Flex 布局里 text-truncate 失效的解法
在 row + col 或自定义 class="d-flex" 下，子元素即使写了 text-truncate，也常因 flex 默认不收缩而溢出。这不是 bug，是 flex 的行为逻辑。
关键不是“加更多 class”，而是让子项真正能压缩：
- 给文字容器加
min-w-0（Bootstrap 5.3+）或style="min-width: 0"（旧版）——这是触发收缩的开关 - 搭配
flex-1或w-100，确保它占满可用空间后再截断 - 检查父容器是否设了
flex-shrink: 0；设了就得去掉，否则子项宽度锁定，overflow: hidden彻底失效 - 避免套多一层无意义
div，比如<div><h5 class="text-truncate">标题</h5></div>，容易打断 flex flow 导致w-100失效
表格单元格（<td>）里怎么用 text-truncate
<p><code><td> 默认是 <code>display: table-cell，而 text-overflow: ellipsis 对它完全无效——连加 d-block 都不够，因为表格布局本身会忽略常规宽度控制。
必须组合四要素：
- 给
<table> 加 <code>table-layout: fixed（Bootstrap 不自带，需额外加style="table-layout: fixed"或自定义类） - 给
<th> 或 <code><td> 设显式宽度，如 <code>w-25、max-w-32或style="width: 120px" - 给单元格加
d-block（或style="display: block"）强制块级 - 再加
text-truncate，三件套才起效 - 加自定义类（如
text-truncate-2），内容含：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: 2、overflow: hidden - 不能设
height，否则截断位置不准；可配max-height（比如max-h-12）辅助视觉对齐 - Firefox 支持
-webkit-line-clamp从 73 版起，但旧版本仍需 JS 回退（按滚动高度测高后截字符串） - 别和
text-truncate混用，CSS 层叠会覆盖掉关键声明
漏掉 table-layout: fixed 是最常见原因：没有它，列宽由内容决定，CSS 宽度声明会被无视。
想截两行？别碰 text-truncate
text-truncate 和多行截断互斥。它强制 white-space: nowrap，而两行需要换行 + 行数限制，机制上就冲突——硬加只会让第一行被切掉一半，或干脆没反应。
要截两行，必须用 WebKit 方案：
中英文混排、emoji、全角标点会让实际截断位置偏移一两个字符——这不是 bug，是浏览器字体度量和 Unicode 宽度计算的自然结果，调试时别死磕像素级对齐。
