text-truncate对多行无效，因其强制white-space: nowrap与多行冲突；多行省略须用-webkit-line-clamp并同时满足display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp、overflow: hidden四条件。
直接用 -webkit-line-clamp，但必须配齐四个声明，缺一不可——否则要么不截断，要么没省略号，要么只显示一行。
为什么 text-truncate 对多行完全无效
Bootstrap 的 text-truncate 类本质是 overflow: hidden + text-overflow: ellipsis + white-space: nowrap。最后这个 white-space: nowrap 强制文本不换行，直接和多行逻辑冲突。哪怕你手动覆盖它，text-overflow: ellipsis 在多行下也根本不会触发。
这不是“没写对”，而是设计目标就是单行——官方文档明确不支持多行场景。
- 加在
<p>或<div>上却没效果？八成是误以为它能自动适配多行 - 试图叠加
-webkit-line-clamp时，浏览器会按层叠规则丢弃冲突声明，结果不可控 - 别浪费时间调试
text-truncate多行用法，它和多行机制互斥
-webkit-line-clamp 必须满足的四个条件
这是目前唯一能在 Chrome、Safari（17+）、Edge 中稳定生效的原生方案，但必须同时满足：
立即学习“前端免费学习笔记（深入）”；
-
display: -webkit-box：启用 WebKit 盒模型（不是flex或grid） -
-webkit-box-orient: vertical：告诉盒子子元素垂直堆叠 -
-webkit-line-clamp: 2（或你要的数字）：真正控制行数的开关 -
overflow: hidden：隐藏溢出内容，否则省略号不渲染
text-overflow: ellipsis 可加可不加（它对多行无效），但 overflow: hidden 绝对不能漏——这是能否显示省略号的关键。
示例：
.line-clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}想截断但不要省略号？别用 -webkit-line-clamp
它天生绑定省略号逻辑，移除 text-overflow: ellipsis 后行为不稳定，部分浏览器可能直接放弃截断。
正确做法是放弃省略号，改用高度计算：
- 用 CSS 变量定义单行高度，比如
--h: 1.5em - 用
calc(3 * var(--h))算出三行总高，赋给height - 配合
line-height: var(--h)和overflow: hidden - 确保容器没有
padding或border干扰高度计算（或把它们算进去）
这种方案纯 CSS、无省略号、兼容性好，但要求 line-height 固定且可预测——字体变化或字号缩放时需同步调整变量。
响应式或多端适配要注意什么
-webkit-line-clamp 本身响应式：容器宽度变，换行位置变，截断行数仍保持。但实际使用中容易踩坑：
- Flex 或 Grid 容器里套
-webkit-box，可能因对齐方式（如align-items）导致截断失效 - 媒体查询中改
-webkit-line-clamp值没问题，但别在同一个选择器里用@supports包裹它——多数浏览器不识别该特性检测 - Firefox 68+ 已支持
-webkit-line-clamp（通过前缀兼容层），但旧版仍需回退方案，比如用max-height+line-height计算值
最常被忽略的一点：所有基于行高的方案，都依赖 line-height 是固定值。如果用了 line-height: normal 或受字体度量影响的单位（如 ch），计算就会偏移，截断位置不准。
