text-truncate生效需同时满足三条件：明确宽度、块级元素、overflow:hidden；缺一不可，常见失效因漏设宽度或父容器干扰flex收缩。
text-truncate 不是“加了就生效”的魔法类，它只封装了三行 CSS，缺一不可：必须有明确宽度、必须是块级元素、父容器不能干扰 flex 收缩逻辑。
为什么加了 text-truncate 却没省略号
八成是漏了 overflow: hidden 或没设宽度——text-truncate 本身不带 width 或 max-width，你得自己补。
- 常见错误：给
<span></span>直接加text-truncate→ 失效，因为span是行内元素，text-overflow不起作用；应改用<p></p>或加style="display: inline-block" - 表格单元格（
<td>）默认是 <code>table-cell显示模式，text-truncate无效；需显式加style="display: block"或用class="d-block text-truncate" - 父容器用了
col类但没指定宽度（如只写col没写col-8或col-md-6），列宽不确定，截断放弃执行 - 必须给该子项加
min-width: 0—— 这是触发收缩的开关，否则内容再长也拒绝压缩 - 推荐组合写法：
class="flex-1 min-w-0 text-truncate"（Bootstrap 5.3+ 支持min-w-0；旧版可用style="min-width: 0"） - 如果父容器设了
flex-shrink: 0，子项直接被锁死，text-truncate彻底失效，得改父容器 - 想截两行，必须用 WebKit 私有方案：
display: -webkit-box+-webkit-box-orient: vertical+-webkit-line-clamp: 2+overflow: hidden+max-height（比如48px） - Firefox 不支持
-webkit-line-clamp，若需兼容，得 JS 回退：按高度测量滚动高度，动态截断字符串 - 别混搭
text-truncate和h-50—— 行高计算不准时，文字会被裁掉下半部分，视觉异常 - 优先用 Bootstrap 5 内置的
text-break（等价于word-break: break-word） - 配合
text-wrap（等价于white-space: normal）可同时处理中英文混排和长单词 - Flex 容器中
text-break可能仍失效，此时加overflow-x: auto保证可横向滚动查看全貌
text-truncate 在 Flex 布局里失效怎么办
Flex 子项默认会撑开自身宽度（即使写了 text-truncate），导致文字不触发截断。关键不是加 flex: 1，而是让子项能真正收缩。
多行截断不能靠 text-truncate
text-truncate 严格单行，硬套在多行容器上只会把第一行截掉一半，或完全没反应。
长单词溢出和换行要分清楚
text-truncate 解决的是“整行太长”，不是“一个单词太长”。遇到 UUID、base64、URL 溢出，得换思路。
最易忽略的一点：所有截断效果都依赖浏览器对“行高”“字体度量”“Unicode 宽度”的判断，中英文混排、emoji、全角标点会让实际截断位置偏移一两个字符——这不是 bug，是渲染引擎的正常行为。
