响应式 line-clamp 必须用 @supports (-webkit-line-clamp: 1) 包裹，仅在支持浏览器启用；需配合媒体查询动态调整行数、固定 line-height（如1.4em）、避免 flex 冲突，并始终使用 -webkit- 前缀。
line-clamp 在响应式场景下必须用 @supports 包裹
直接在根选择器里写 -webkit-line-clamp: 3，小屏下会卡死在 3 行，无法随宽度收缩自动减少行数。真正可控的做法是用 @supports (-webkit-line-clamp: 1) 做特性检测，只在支持的浏览器中启用整套逻辑，避免不兼容环境布局错乱。
漏掉这层包裹，会导致：Firefox 68+ 降级为无截断、IE 页面撑开、旧版 Android WebView 文字溢出容器边缘。
-
@supports必须检查-webkit-line-clamp，不是line-clamp（标准属性至今无效） - 包裹块内要重置
max-height: none，否则和媒体查询里的max-height叠加导致行数少于预期 - 不要把
@supports和媒体查询嵌套——CSS 不支持条件嵌套，应并列书写
用媒体查询动态调整 -webkit-line-clamp 的值
响应式截断不是靠 JS 计算，而是靠 CSS 媒体查询切换 -webkit-line-clamp 的数值。比如卡片在桌面端留 4 行，在平板上缩为 3 行，小屏手机压到 2 行——每档都要单独声明，且必须放在 @supports 块内部。
注意：行数变化后，line-height 必须是固定值（如 1.4em），不能用 normal 或百分比，否则不同设备下实际高度浮动，导致截断位置偏移甚至文字被切半。
- 小屏示例：
@media (max-width: 480px) { .desc { -webkit-line-clamp: 2; } } - 行高建议用
em或rem，和字体大小联动，避免像素单位在高 DPR 屏幕下失真 - 别试图用
clamp()函数控制-webkit-line-clamp的值——它只接受整数，不接受计算表达式
Flex 容器里用 line-clamp 的隐藏冲突
当文本在 display: flex 的卡片内部时，直接给子元素加 display: -webkit-box 很可能失效——父级 flex 布局会覆盖子级的 box 模型，导致 -webkit-line-clamp 被忽略。
常见表现是：PC 端正常截断，移动端完全不生效，控制台查不到报错，样式面板里 -webkit-line-clamp 显示为“已禁用”。
- 解决办法：给文本容器加
align-self: flex-start，或在外层再包一层div并设为display: block - 绝对不要给
-webkit-box元素设height，它会和-webkit-line-clamp冲突；用max-height仅作降级方案 - 如果用了 Tailwind，
line-clamp-2类必须配合@apply display-[-webkit-box] -webkit-box-orient-vertical overflow-hidden才能生效
Firefox 下必须保留 -webkit- 前缀
哪怕你写了 @supports (line-clamp: 2)，Firefox 依然不会识别——它从 68 版起支持该能力，但只认 -webkit-line-clamp，连 -moz-line-clamp 都不响应。
实测中，只提供标准语法等于没写；同时写双前缀又可能触发 Safari 的解析异常。最稳妥的写法是：只用 -webkit- 前缀，并确保 @supports 检测也对应它。
- 错误写法：
@supports (line-clamp: 2) { ... -webkit-line-clamp: 2; } - 正确写法：
@supports (-webkit-line-clamp: 2) { ... -webkit-line-clamp: 2; } - 不需要加
-moz-box-orient: vertical，现代 Firefox 已能正确解析-webkit-box-orient
最易被忽略的一点：line-clamp 的行数不是绝对视觉行数，它受 font-size、line-height、padding 和父容器 aspect-ratio 共同挤压。调试时别只盯着 CSS，得在真机上反复滚动查看截断是否刚好卡在字干中间——那说明 line-height 没对齐基线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
