text-overflow: ellipsis仅支持单行省略，因依赖white-space: nowrap强制不换行；多行需用-webkit-line-clamp配合display: -webkit-box和-webkit-box-orient: vertical，且必须设overflow: hidden与明确宽度。
移动端多行文本省略不能只靠 text-overflow: ellipsis，它天生只支持单行；真要截 2–3 行并带省略号，-webkit-line-clamp 是目前最轻量、兼容性可接受的纯 CSS 方案，但必须配齐三件套，漏一个就白写。
为什么 text-overflow: ellipsis 在多行下完全不生效
text-overflow: ellipsis 的设计逻辑就是“单行溢出时加点”，它依赖 white-space: nowrap 强制文本不换行——这意味着你根本没机会让它作用于第二行。哪怕你给容器设了 height: 4em + overflow: hidden，也只会粗暴裁剪，不会出现省略号。
常见错误现象：
- 文字被切掉半行，末尾没省略号
- 开发者误以为是
line-height算错，反复调高度，结果毫无改善 - 在 Safari 上偶尔显示，在 Chrome/Firefox 完全不触发
-webkit-line-clamp 必须搭配的三个属性
这个非标准属性不是开关，而是“触发器”，只有和以下两个声明一起用才起效：
立即学习“前端免费学习笔记（深入）”；
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
-
display: -webkit-box：启用 WebKit 特有的弹性盒模型（注意不是标准display: flex） -
-webkit-box-orient: vertical：告诉浏览器主轴朝下，让文本按行堆叠 -
overflow: hidden：必须显式写，不能靠父级继承
缺任何一个，-webkit-line-clamp: 2 都只是个被忽略的声明。另外，width 或 max-width 也得有——移动端推荐用 max-width: 100% 或 max-width: 30ch，比固定像素更适应不同屏幕。
移动端特别要注意的坑
在 iOS Safari 和 Android Chrome 上，这些细节会直接导致省略失效：
- 容器内含
<img alt="HTML移动端多行文本布局的省略实现" >或<span></span>等内联元素时，如果它们设了vertical-align: top，会拉高整行行高，导致第 3 行实际只显示了半行，-webkit-line-clamp截断位置偏移 - Flex 布局中父容器用了
flex: 1，子元素没加min-width: 0，会导致宽度计算异常，省略不触发 - 字体加载期间 DOM 已渲染，但 Web Font 尚未就绪，初始行高不准，可能造成第一帧显示不全或省略过早（可加
font-display: swap缓解） - Firefox 直到 v125 才实验性支持
line-clamp（需手动开启layout.css.line-clamp.enabled），生产环境不能依赖
表格单元格里别硬上 -webkit-line-clamp
在 <td> 上强行覆盖 <code>display: -webkit-box 会破坏表格布局：列宽崩塌、相邻单元格错位、iOS Safari 下偶发白屏。这不是写法问题，是 display: table-cell 和 -webkit-box 底层渲染冲突。
可行替代方案只有两个：
- 服务端提前截断字符串，返回带
"…"的结果（推荐用于 ID、URL、日志等关键字段） - 前端用
::after伪元素遮罩：设max-height: 4.2em（line-height: 1.4em × 3），position: relative，再用渐变背景 +content: "\2026"覆盖右下角
真正容易被忽略的是语义和可访问性：CSS 省略只改视觉，DOM 文本完整保留，屏幕阅读器仍读全部内容。如果省略的是错误码、订单号或权限提示，宁可服务端处理，也不要前端“看起来整齐”。
