text-overflow: ellipsis 仅对块级元素生效，需同时满足 width/max-width、white-space: nowrap 和 overflow: hidden；Bootstrap 5 的 text-truncate 类缺宽度设置，Flex 子项还需 min-width: 0 和 flex-shrink-1。
text-overflow: ellipsis 只对块级元素生效
直接给 <div> 或 <p> 加 text-overflow: ellipsis 没反应，是因为它必须配合两个前提条件：固定宽度（width 或 max-width）和强制单行（white-space: nowrap），且容器需是块级并设置 overflow: hidden。
Bootstrap 5 默认没封装这个组合样式，所以不能只靠 text-truncate 类就搞定所有场景。
-
text-truncate类只包含overflow: hidden、text-overflow: ellipsis和white-space: nowrap，但**不设宽度**——你得自己加width或用响应式类如w-100、max-w-25 - 用在 Flex 容器子项时，要额外加
min-width: 0（防止内容撑开），否则省略号失效 - 表格单元格（
<td>）默认是table-cell显示模式，text-truncate无效，得先改成display: block或用text-truncate+table-cell的变通写法
Bootstrap 5 的 text-truncate 类怎么用才稳
这个类本身没问题，但容易因父容器行为“失灵”。最常见的是用在 <div class="d-flex"> 里的一段文字，看着写了 text-truncate，结果还是换行或溢出。
- Flex 子项必须加
flex-shrink: 1（Bootstrap 对应类是flex-shrink-1）+min-width: 0（Bootstrap 没现成类，得手写或自定义） - 如果父容器是
col或col-md-6，确保该列有明确宽度（比如用了col-8），否则text-truncate会因宽度不定而放弃截断 - 避免套在
<span>上——span是行内元素，text-overflow不起作用；要么改用<div>，要么加style="display: inline-block"
多行文本截断（2行/3行）没法靠 Bootstrap 原生类解决
Bootstrap 官方不提供 line-clamp 支持，text-truncate 仅限单行。想截两行？得手动写 CSS，而且要注意兼容性。
- 现代方案用
display: -webkit-box+-webkit-line-clamp: 2，但 Firefox 和部分旧版 Chrome 不支持 - 不能和
text-truncate混用——两者机制冲突，后者会覆盖前者所需的overflow设置 - 若需服务端 fallback（比如 SSR 渲染时 JS 还没加载），建议优先用后端截断 + 添加省略号，CSS 截断只是增强体验
中文标点、全角空格导致省略号位置异常
截断后出现“…”卡在句号前、或者空格后多一格，不是样式问题，是浏览器对 Unicode 字符宽度和换行点的判断差异。
- 全角空格（
、）、书名号（《》）可能被当作“可换行点”，导致white-space: nowrap失效 - 避免在截断区域内混用中英文标点；必要时用零宽空格（
）或word-break: keep-all强制不断行 - 测试时别只看 Chrome —— Safari 对
text-overflow的字符计数更严格，同一段文字在 Safari 可能少显示一个字
width，还有 Flex 下悄悄撑开的 min-width。 
