text-overflow: ellipsis仅支持单行省略，多行必须用-webkit-line-clamp四件套实现；Firefox等不支持该属性，需JS或服务端截断降级。
text-overflow: ellipsis 本身不响应式，但可以配合容器宽度动态变化实现响应式截断效果；多行场景必须用 -webkit-line-clamp，不能指望它自动适配不同屏幕——得靠你控制 line-height、font-size 和媒体查询。
单行卡片标题怎么让省略号随屏幕缩放自动生效
关键不是“让它响应”，而是确保三个前提始终成立：容器有明确宽度（或 max-width）、white-space: nowrap、overflow: hidden。响应式失败，90% 是因为父容器宽度没约束，或者 Flex 布局下子项撑开导致 overflow 不触发。
- 给文字容器加
min-width: 0（尤其在display: flex的卡片里，否则默认min-width: auto会阻止截断） - 避免用
width: 100%而不用max-width——百分比依赖父级，而父级可能没设宽 - 如果卡片是 Grid/Flex 子项，确保其
flex-basis或grid-column有明确尺寸约束 - 不要在
text-overflow元素上设height，它会干扰换行计算
多行摘要用 -webkit-line-clamp 为什么在手机上看只显示一行
不是属性失效，是 line-height 和 font-size 在响应式缩放时没同步稳住比例。例如：桌面端设了 font-size: 16px; line-height: 1.5，移动端用 rem 缩到 14px，但 line-height: 1.5 算出来是 21px，而 -webkit-line-clamp: 3 实际裁剪高度 = 3 × 21px = 63px，但容器高度可能被其他样式压缩，导致只撑开一行就溢出了。
-
-webkit-line-clamp截断依据是**容器总高度**，不是行数逻辑，所以line-height必须是固定值（如1.4em）或与font-size同单位的数值 - 中英文混排时，某些字体组合会让实际行高浮动，建议统一用
font-family并测试思源黑体 + 英文无衬线组合 - Firefox 125+ 才支持
-webkit-line-clamp，旧版 Firefox 和 IE 完全无效，别指望兼容
不想写 JS，又想兼顾老浏览器和多行省略怎么办
放弃省略号，用纯高度裁剪更可靠。这是唯一能在 IE11、Firefox 旧版、Safari 10+ 全通的方案，代价是没 “…” 提示。
立即学习“前端免费学习笔记（深入）”；
- 设固定
line-height，比如line-height: 1.3em（禁用normal或百分比） - 容器
max-height = line-height × 行数，例如三行就写max-height: 3.9em - 必须加
overflow: hidden，缺它等于没设max-height - 避免同时设
height和max-height，height会强制拉伸/挤压行高，破坏对齐
真正难的不是写对那四行 -webkit- 属性，而是当设计要求“在所有设备上截三行且带省略号”时，你得同时盯住字体渲染差异、Flex/Grid 的最小宽度行为、以及 Firefox 版本碎片——这些地方一松懈，省略号就静默消失，还不报错。
