-webkit-line-clamp 是实现多行截断的唯一原生可行方案，需配合 display: -webkit-box、-webkit-box-orient: vertical 和 overflow: hidden，并用 max-height 与媒体查询控制响应式行数。
用 -webkit-line-clamp 实现多行截断是唯一可行路径
Bootstrap 4 没有 text-truncate 的多行变体，text-truncate 只对单行生效。想让文字在大屏显示两行、小屏显示三行，必须手写 CSS，核心就是 -webkit-line-clamp —— 它不是“装饰性技巧”，而是目前浏览器支持最稳、无需 JS 就能工作的原生能力。
注意：它只控制“最多显示 N 行”，不是“强制占满 N 行”。所以必须搭配 line-height 和 max-height 精确卡位，否则在某些字号或缩放比例下会漏出第 N+1 行。
-
display: -webkit-box和-webkit-box-orient: vertical缺一不可，漏掉任一就会完全失效 - 容器需设
overflow: hidden，否则截断不触发 - 不要给容器设固定
height，用max-height（如max-height: 2.8rem对应两行）更安全
响应式行数切换必须靠媒体查询 + 重写 -webkit-line-clamp
不能指望 Bootstrap 4 的断点类（如 d-lg-block）帮你改行数——它们不操作这个属性。你得自己写 @media，且必须复用 Bootstrap 4 的标准断点值：sm: 576px、md: 768px、lg: 992px、xl: 1200px。写错阈值会导致行为错位，比如在 iPad 上本该三行却只显示两行。
示例：大屏（≥992px）两行，小屏（
.card-text {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.5;
max-height: 3rem; /* 2 × 1.5rem */
}
<p>@media (max-width: 767.98px) {
.card-text {
-webkit-line-clamp: 3;
max-height: 4.5rem; /<em> 3 × 1.5rem </em>/
}
}</p>
- 别用
min-width写反向逻辑，容易和 Bootstrap 自身的col-md-6类冲突 - 如果字体用了 rem，
line-height和max-height必须同单位，避免计算偏差 - 不要在同一个选择器里用
!important覆盖，优先靠选择器权重和媒体查询顺序控制
兼容性兜底不能只靠 @supports
@supports (-webkit-line-clamp: 2) 能识别现代浏览器，但 IE 和旧版 Android WebView 根本不进这个块——它们连 @supports 都不支持。真要保老设备，得双轨并行：
- CSS 层：对不支持的 UA，用
height: auto+overflow: visible放开截断，靠内容自然换行 - JS 层（可选）：用
getBoundingClientRect()测容器高度，手动截文本加"…"，但仅限关键卡片，别全局加 - 绝对别用
flex或grid布局包裹截断容器，-webkit-box和flex在同一元素上会打架
Bootstrap 4 项目里别拼凑工具类
有人试图用 text-truncate + h-50 + overflow-hidden 组合模拟多行效果，结果失败——因为 h-50 是固定像素高度，无法随字体缩放，text-truncate 又只管单行。Bootstrap 4 的工具类体系里根本没有 line-clamp 相关类，硬拼只会让样式混乱、调试困难。
正确做法是：单独建一个 _text-clamp.scss 文件，按 Bootstrap 断点命名习惯写类名，比如 .text-clamp-2、.text-clamp-3、.text-clamp-md-2，然后在主入口 @import 进去。这样既不污染 Bootstrap 原生 CSS，又方便团队复用。
最容易被忽略的一点：如果你用了 RFS（Responsive Font Sizes）调整了基础字号，line-height 和 max-height 的数值就得同步重算，不能还按 1rem = 16px 硬写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
