text-truncate仅支持单行截断，因其依赖white-space: nowrap；多行截断须用-webkit-line-clamp并满足display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp、overflow: hidden四条件。
单行截断用 text-truncate，多行截断必须绕开它——它和多行机制互斥，加了反而失效。
为什么 text-truncate 不能用于多行
Bootstrap 的 text-truncate 类本质是这三条声明的组合：overflow: hidden、text-overflow: ellipsis、white-space: nowrap。最后这个 white-space: nowrap 强制文本不换行，直接锁死在单行逻辑里。一旦你试图叠加 -webkit-line-clamp，浏览器会按 CSS 层叠规则丢弃冲突声明，结果要么没省略号，要么只显示一行。
- 它不是“不够用”，而是设计目标就是单行——Bootstrap 官方明确不支持多行场景
- 加在
<p>或<div>上却没效果？八成是误以为它能自动适配多行 - 哪怕手动覆盖
white-space: normal，text-overflow: ellipsis在多行下也完全不触发
多行截断唯一靠谱的纯 CSS 方案：用 -webkit-line-clamp
这是目前唯一能在 Chrome、Safari（17+）、Edge 中稳定显示省略号的原生方案，但必须严格满足四个条件，缺一不可：
-
display: -webkit-box—— 启用 WebKit 的盒模型 -
-webkit-box-orient: vertical—— 告诉盒子垂直堆叠子行 -
-webkit-line-clamp: 2（或你要的行数）—— 真正控制行数的开关 -
overflow: hidden—— 隐藏超出部分，否则省略号不出现
示例写法：
立即学习“前端免费学习笔记（深入）”；
.line-clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
注意：text-overflow: ellipsis 可加可不加（它对多行无效），但别漏掉 overflow: hidden——这是省略号能否渲染的关键。
Firefox 兼容性问题怎么破
Firefox 全版本不支持 -webkit-line-clamp，这意味着你得在“视觉一致”和“技术简洁”之间做选择：
- 接受降级：Firefox 用户看到完整文本（无截断），其他浏览器正常显示省略号——适合内部系统或用户以 Chrome/Safari 为主
- 用 JS 补位：监听容器尺寸，按行高 × 行数计算最大字符数，截断后手动加
"…"；推荐clamp.js或自研轻量函数 - 伪元素渐变遮罩：用
::after+linear-gradient模拟省略号效果，兼容性好但无法真正“截断文本”，复制粘贴时会带出隐藏内容
别用 height + overflow: hidden 粗暴裁剪——中英文混排、字号变化、字体加载延迟都会导致行高计算偏移，极易切掉半行字，视觉上非常突兀。
Flex 布局里多行截断特别容易翻车
把 -webkit-line-clamp 类加在 display: flex 的子项里，90% 会失效。根本原因是 Flex 子项默认 min-width: auto，阻止内容压缩，导致文本撑开容器、overflow: hidden 失效。
- 必须给该子项加
min-width: 0（Bootstrap 5 没内置min-w-0，得手写或自定义） - 同时确保父容器有宽度约束（比如
col-6、max-width: 300px），否则子项宽度无限大 - 避免在
<table>或<td>里直接用——table-cell不支持-webkit-box，得先加class="d-block"
最稳写法：
<div class="d-flex">
<div class="flex-shrink-1" style="min-width: 0; width: 200px;">
<p class="line-clamp-2">超长描述文本…</p>
</div>
</div>
多行截断真正的复杂点不在代码本身，而在于你是否意识到：它从来不是一个“设个属性就完事”的功能，而是布局、浏览器能力、内容不确定性三者博弈的结果。尤其当文本来自 CMS 或用户输入时，标点、空格、零宽字符都可能让行高计算失准——这时候 JS 方案虽然重，反而是最可控的选择。
