-webkit-line-clamp 是当前最轻量、最响应式的多行截断方案，依赖行数而非固定高度，适配动态字体缩放和 rem 布局，但需配齐 display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp、overflow: hidden 四属性，且在 firefox 和旧安卓 webview 中不可靠。
直接结论：用 -webkit-line-clamp 是当前最轻量、最响应式的方案，但必须配齐四个属性，且不能指望它在 Firefox 或旧安卓 WebView 里完全可靠。
为什么 -webkit-line-clamp 在响应式场景下最实用？
它不依赖固定高度或字体大小，只认“行数”——容器宽度缩小时自动重排换行，达到设定行数就截断，省略号位置自然对齐。这比靠 max-height + line-height 计算的方案更健壮，尤其在动态字体缩放（如用户设置系统字号）或 REM 布局中不易错位。
但注意：-webkit-line-clamp 不是标准属性，它的行为由浏览器渲染引擎决定。Safari 15.4–16.3 和部分 Android WebView 中会出现末行文字被切半、省略号偏移的问题，这不是你写错了，是 WebKit 的已知 bug。
- 必须同时设置：
display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N、overflow: hidden -
text-overflow: ellipsis可加可不加，现代 WebKit 已默认渲染省略号 - 不要给容器设
height或max-height，否则可能干扰行数判断
如何让 -webkit-line-clamp 在 Tailwind 中真正生效？
Tailwind v3.0+ 才内置 line-clamp-N 工具类，但默认不启用插件。如果你写了 line-clamp-3 却没效果，大概率是配置漏了。
- 检查
tailwind.config.js是否包含corePlugins: { lineClamp: true }（或压根没禁用它） - 确认没写
corePlugins: { lineClamp: false }—— 这会彻底屏蔽生成 - v2.x 用户需手动安装
@tailwindcss/line-clamp并注册到plugins: [] -
line-clamp-3会自动带上overflow-hidden、display: -webkit-box等全部必需样式，不用额外补
Firefox / 老安卓怎么兜底？别硬套 max-height
单纯设 max-height: 3em 在字体缩放、不同 line-height 下极易失效——比如用户开了 125% 缩放，三行实际占高可能变成 4.2em，文本就被多砍掉半行。
更稳妥的降级思路是：用 @supports 隔离现代方案，再叠加渐变遮罩伪元素，视觉上模拟省略号，同时保留可读性：
.text-clamp-3 {
/* 基础降级 */
line-height: 1.5;
max-height: 4.5em; /* 3 × 1.5 */
overflow: hidden;
position: relative;
}
@supports (-webkit-line-clamp: 3) {
.text-clamp-3 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
}
.text-clamp-3::after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding-left: 4px;
background: linear-gradient(to right, rgba(255,255,255,0), white 50%);
pointer-events: none;
}
关键点：::after 的 content 是真实文字，屏幕阅读器能读到；渐变背景只是视觉覆盖，不破坏语义。
动态行数（比如 React 的 lines prop）怎么处理？
Tailwind 不支持运行时拼接 class 名，class="line-clamp-${lines}" 会失败。也不能盲目生成 line-clamp-12 —— 默认只到 -6，超出范围的 class 根本不会编译进 CSS。
- 预设安全范围：只映射 1–6 行，例如
{ 2: 'line-clamp-2', 3: 'line-clamp-3' } - 超出行数时，改用内联
style回退：style={{ WebkitLineClamp: props.lines }} - 如果必须支持 IE 或极老环境，放弃 CSS 方案，改用
clamp-text这类轻量 JS 库，它基于getBoundingClientRect()真实测量行高
最易被忽略的是 Safari 16.3 之前的渲染异常——哪怕你所有配置都对，某些机型上仍会漏字。上线前务必在真机 Safari 上测三行以上场景，别只信 Chrome 模拟器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
