text-truncate 失效主因是缺失三个前提：宽度限制（width/max-width）、块级显示（如block/inline-block）、父容器允许收缩；Flex中需加min-width:0；多行截断须用-webkit-line-clamp；title提示依赖scrollWidth>offsetWidth。
text-truncate 为啥加了没反应
它只是一组 CSS 声明的快捷写法，不是魔法开关。加了 text-truncate 却没省略号，大概率是缺了三个硬性前提中的一个：width 或 max-width、块级显示上下文、父容器不阻止收缩。
常见失效场景包括：
- 直接套在
<span>上 →span是内联元素，text-overflow不起作用；得加style="display: inline-block"或换成<div> - 用在
<td>里 → 默认display: table-cell，不支持text-overflow；需手动加style="display: block" - 放在
flex容器子项中 → 子项默认min-width: auto，内容撑开宽度，截断逻辑压根不触发
Flex 布局里 text-truncate 怎么配才生效
Flex 子项必须“愿意变窄”，否则 text-truncate 就是摆设。核心是让 flex 项目接受收缩约束。
实操建议（任选其一）：
立即学习“前端免费学习笔记（深入）”；
- 给该子元素加
min-width: 0（最轻量，推荐） - 写成
flex: 1; min-width: 0;，再叠加text-truncate - 避免父容器设了
flex-shrink: 0或min-width: unset
别指望 text-truncate 自己搞定宽度逻辑——flex 引擎先算尺寸，CSS 截断只是最后一步。
多行文本要省略号，text-truncate 行不通
text-truncate 是单行专用，Bootstrap 5 官方不提供多行截断类。想截 2 行或 3 行，只能手动补 CSS，目前最可行的是 -webkit-line-clamp 方案。
必须同时满足以下条件：
- 设置
display: -webkit-box和-webkit-box-orient: vertical - 指定
-webkit-line-clamp: 2（整数，表示最多显示行数） - 保留
overflow: hidden，否则多余内容会露出来 - 不能设
height，会导致截断位置错乱；可用max-height配合行高估算（如line-height: 1.5× 2 行 ≈max-height: 3em）
注意：Firefox 全版本不支持 -webkit-line-clamp，若需兼容，得换 JS 截断方案。
title 提示为什么有时不弹出
浏览器只在 scrollWidth > offsetWidth 时才触发 title 提示。也就是说，文字实际宽度必须真地超出容器可视宽度，title 才会生效。
容易被忽略的点：
- 用了
text-truncate后，文字被裁剪，但scrollWidth可能仍等于offsetWidth（尤其在字体渲染或缩放后） - 某些字体或字号下，浏览器计算
scrollWidth有偏差，导致title判定失败 - 响应式场景中，容器宽度随视口变化，但
title属性值是静态字符串，不会自动更新
如果强依赖提示功能，建议用 JS 监听 resize + getBoundingClientRect() 主动判断是否溢出再控制 title 显示。
