text-overflow: ellipsis仅对单行有效，多行必须用-webkit-line-clamp；单行需同时满足white-space: nowrap、overflow: hidden、明确宽度及块级显示；多行方案在Firefox等浏览器不支持，需JS或服务端降级。
text-overflow: ellipsis 对多行文本完全无效，移动端响应式截断必须分单行和多行两种路径处理，没有“一招鲜”写法。
单行截断为什么加了 text-overflow: ellipsis 还是不生效
不是属性写错了，而是缺了三个硬性前提：
-
white-space: nowrap必须存在——否则文本自动换行，text-overflow根本不触发检测 -
overflow: hidden必须显式声明——否则溢出内容照常显示，浏览器没理由去截断 - 容器得有明确宽度约束：
width或max-width；在 flex 容器里还要加min-width: 0防止被拉伸撑宽 - 别直接用在
display: inline元素上——它不接受width，得先改成inline-block或block
多行截断只能靠 -webkit-line-clamp，但它很娇气
目前唯一能在移动端视觉准确、纯 CSS 实现的方案，但只在 WebKit/Blink 内核浏览器（iOS Safari、Chrome Android、微信 WebView）中可靠，Firefox 和部分定制 ROM 浏览器会彻底忽略。
失效常见原因包括：
- 漏掉任意一个配套声明：
display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden - 父容器用了
flex或grid，而子元素又没重置display，导致-webkit-box被覆盖 - 内容含
<img>、<span></span>等非纯文本节点——-webkit-line-clamp对混合 DOM 支持极差 - 没设
width或max-width，尤其在响应式布局中仅靠100%但父级无宽，它就失效 - iOS 16.4+ 和部分 Android WebView 要求额外加
text-overflow: ellipsis才渲染省略号，光靠overflow: hidden不够
响应式场景下怎么让截断行数随屏幕变化
不能只靠媒体查询改 -webkit-line-clamp 值——它不支持小数，也不响应动态计算。更稳的做法是：
- 用
rem或em设line-height和max-height，例如line-height: 1.4+max-height: 4.2em（对应 3 行） - 在关键断点（如
max-width: 768px）里用媒体查询调整-webkit-line-clamp值，比如桌面端4行，移动端降为2行 - 避免和
flex的align-items混用——容易导致-webkit-box布局错乱，优先用margin或padding控制垂直对齐 - 如果项目已用现代 CSS 框架（如 Tailwind），检查是否全局重置了
display，必要时加!important强制display: -webkit-box
兼容性 fallback 别靠 @supports 检测 line-clamp
@supports (line-clamp: 2) 几乎永远返回 false，因为它是私有前缀属性，@supports 对它识别率极低。
真正能落地的兜底方式只有两种：
- JS 运行时检测：
getComputedStyle(el).webkitLineClamp !== 'none'，成立则启用 CSS 截断，否则走 JS 截字逻辑 - 服务端预截：后台根据字段长度 + 字体配置估算行数，提前截断并加
…，前端只负责展示
纯 CSS 多行省略号没有通解，-webkit-line-clamp 是当前唯一可用的视觉方案，但它的“可用”是有边界的——边界之内要配齐、写准、避坑；边界之外，得接受 JS 或服务端介入的事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
