text-overflow: ellipsis 仅对块级元素生效，需配合 overflow: hidden、white-space: nowrap 及固定宽度；Bootstrap 5 的 text-truncate 封装该组合但仅支持单行；多行省略需 -webkit-line-clamp（WebKit 专用）或 JS 方案；Flex 子项中须加 min-width: 0 才能生效。
text-overflow: ellipsis 只对块级元素生效
直接给 <span> 或 <a> 加 text-overflow: ellipsis 不会生效，因为 CSS 要求该属性必须配合 overflow: hidden、white-space: nowrap 且元素需有**固定宽度**（或受父容器约束的明确宽度）。Bootstrap 的文本类（如 text-truncate）正是封装了这一组合。
用 Bootstrap 5 的 text-truncate 最省事
Bootstrap 5 内置了 text-truncate 工具类，它等价于：overflow: hidden + text-overflow: ellipsis + white-space: nowrap。但注意：它只作用于单行截断。
- 必须加在有明确宽度的容器上（比如
width: 200px、max-width: 100%或响应式栅格列中） - 不能单独用于
<div>如果它默认是display: block但父容器没设宽，依然无效 - 多行省略需另寻方案，
text-truncate不支持
<div class="col-4"> <p class="text-truncate" style="max-width: 150px;">这是一段特别长的文字，超出部分应该显示省略号</p> </div>
多行文字省略不能靠 text-truncate
想实现 2 行或 3 行后加省略号？CSS 原生没有可靠跨浏览器的多行 text-overflow。常见做法是用 display: -webkit-box + -webkit-line-clamp，但它仅在 WebKit 内核（Chrome/Safari）有效，Firefox 不支持。
- Bootstrap 本身不提供多行截断工具类
- 若需兼容 Firefox，得用 JS 方案（如监听容器尺寸、截断字符串并补
"…"） - 用
-webkit-line-clamp时，必须同时设display: -webkit-box和-webkit-box-orient: vertical
<p class="line-clamp-2">多行文字…</p>
<style>
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
Flex 容器里 text-truncate 容易失效
把 text-truncate 放在 display: flex 的子项里，常因 flex 项目默认不收缩（flex-shrink: 1 但内容撑开后仍溢出）导致省略号不出现。
- 解决方法：给该子项加
min-width: 0（触发 flex 项目可收缩） - 或者显式加
flex: 1+min-width: 0，再套text-truncate - 别只依赖
text-truncate，flex 布局下宽度逻辑更复杂
text-truncate，多行看浏览器支持，Flex 里记得塞 min-width: 0——这三个点漏掉一个，省略号就大概率不出来。 
