CSS 可通过 -webkit-line-clamp 结合媒体查询实现跨设备行数控制，需配合 display: -webkit-box、-webkit-box-orient: vertical、max-height（=行高×行数）及 line-height 精确截断，Bootstrap 无内置支持，须自定义响应式类。
用 CSS 行高和视口单位控制跨设备行数
bootstrap 本身不提供“指定显示几行文字”的能力，text-truncate 只能单行截断，text-wrap 是放行但不管行数。真要实现“大屏两行、小屏三行”，得靠 css 的 line-clamp + 媒体查询组合，且必须配合固定高度或最大高度。
关键点：浏览器对 -webkit-line-clamp 的支持已很稳定（Chrome/Firefox/Safari/Edge），但它是“最多显示 N 行”，不是“强制撑满 N 行”，所以需结合 line-height 和容器 max-height 精确控制。
- 假设字号为
1rem，行高为1.4，则单行高度 ≈1.4rem - 两行对应
max-height: 2.8rem，三行对应max-height: 4.2rem - 必须同时设
display: -webkit-box、-webkit-box-orient: vertical才生效
在 Bootstrap 项目中写响应式 line-clamp
不要依赖 Bootstrap 工具类拼凑——它没有 line-clamp 相关 class。直接写自定义 CSS，并利用 Bootstrap 的断点命名保持一致性。
@media (min-width: 992px) {
.text-2lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
max-height: 2.8rem; /* 2 × 1.4 */
}
}
@media (max-width: 991.98px) {
.text-2lines {
-webkit-line-clamp: 3;
max-height: 4.2rem; /* 3 × 1.4 */
}
}
然后在 HTML 中： 这是一段可能很长的文字...
- 注意：
max-height必须严格匹配行高 × 行数，否则可能多显示半行或少截一行 - 如果文字用了
font-size响应式（比如clamp()），max-height也要同步响应，否则会失效 - Firefox 对
-webkit-line-clamp支持没问题，但旧版 Safari（overflow: hidden 配合
为什么不用 text-truncate 或 text-wrap
text-truncate 只作用于单行，加 text-wrap 后就失去截断效果；而纯 text-wrap 不控制行数，实际显示几行完全由内容长度和容器宽度决定，无法做到“小屏强制三行”。
-
text-truncate编译后生成的是white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -
text-wrap对应white-space: normal;，和line-clamp冲突 - 试图用
h-50或min-vh-100这类高度工具类替代max-height无效——它们不触发line-clamp截断逻辑
移动端三行显示不全？检查字体渲染差异
同一段文字，在 iOS Safari 上可能比 Chrome 多占半行，原因常是字体度量（font metrics）不同。尤其用了非系统字体（如 Inter、SF Pro）时，line-height 计算结果会有偏差。
- 解决办法：用
line-height: 1.4而不是line-height: 1.4rem，确保是相对值 - 测试时务必在真机 Safari 上验证，模拟器有时渲染不准
- 若仍不稳定，可改用 JS 方案：用
getClientRects()获取文本行数，动态加 class，但性能开销大，仅作兜底
行数控制本质是视觉约束，不是语义保证。别指望它在所有字体、字号、缩放比例下都绝对精确——留一点容错空间比硬卡死更可靠。
