单行省略需 white-space: nowrap、overflow: hidden、text-overflow: ellipsis 三者缺一不可；多行省略仅 -webkit-line-clamp 可行但不兼容 firefox 和旧版 android webview。
单行省略号在移动端必须用 white-space: nowrap + overflow: hidden + text-overflow: ellipsis 三件套，缺一不可；多行省略目前没有全浏览器兼容的纯CSS方案，-webkit-line-clamp 是唯一可行路径，但 Firefox 和部分旧版 Android Webview 不支持。
单行省略号：为什么三个属性一个都不能少
这三个属性是协同生效的链条，不是可选组合：
-
white-space: nowrap是前提——没有它，文本会自动换行，text-overflow根本不触发 -
overflow: hidden是裁剪动作——没它，溢出内容照常显示，省略号无处安放 -
text-overflow: ellipsis是视觉反馈——只设这个属性而没前两者，浏览器直接忽略 - 容器必须有明确宽度约束：
width、max-width或父级为flex/grid且子项设min-width: 0，否则在 iOS Safari 中可能失效
多行省略号：-webkit-line-clamp 是唯一实用解，但得接受它的边界
移动端主流浏览器（Chrome for Android、Safari iOS）都支持 -webkit-line-clamp，但它天生是 WebKit/Blink 专属，Firefox 和部分 Android 4.x 系统 WebView 完全无视。
- 必须配合
display: -webkit-box和-webkit-box-orient: vertical才能生效 -
-webkit-line-clamp: 2表示最多显示 2 行，超出部分裁剪并加省略号 - 不能和
flex或grid布局混用——display: -webkit-box会覆盖原有 display 值 - 如果需要兼容 Firefox，只能 JS 计算高度截断，但会引入重排开销，表格类场景慎用
移动端特别注意：表格、Flex 容器和长单词干扰
移动端容易踩坑的地方不在省略号本身，而在它所处的上下文：
- 表格中使用单行省略，务必加
table-layout: fixed，否则td宽度不守约，ellipsis失效 - Flex 子项默认
min-width: auto，会撑宽容器导致省略失败，需显式设min-width: 0 - 长 URL 或 BASE64 字符串（如
eyJhbGciOi...）会阻止换行，让white-space: nowrap变成“撑破布局”的帮凶——此时应优先用overflow-wrap: break-word或word-break: break-all配合省略号逻辑，而不是硬上nowrap - iOS Safari 对
text-overflow: ellipsis的渲染有微小延迟，快速滚动时偶现“闪现完整文本”，加transform: translateZ(0)可强制硬件加速缓解
真正难的不是写出那几行 CSS，而是判断当前文本是否真的适合省略：中文短句、带空格的英文标题可以放心用；但无分隔符的 Token、加密串、长数字 ID，省略号反而掩盖关键信息，这时候该断行就断行，该 Tooltip 就 Tooltip。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
