-webkit-line-clamp在iOS真机失效是因为其依赖的渲染链被破坏，必须同时满足：display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden、明确宽高、非inline元素（如禁用text标签）、无flex干扰、line-height×行数≤max-height，缺一不可。
-webkit-line-clamp 在 iOS 真机上失效，不是写法错了，而是它依赖的渲染链被破坏了——常见于 text 标签、rich-text 组件、或父容器未设宽高/未触发 BFC。
为什么 -webkit-line-clamp 在 iOS 上不生效
iOS Safari（及所有基于 WebKit 的 WebView，包括 uni-app iOS 真机）对 -webkit-line-clamp 有严格前提：必须同时满足以下条件，缺一不可：
-
display: -webkit-box和-webkit-box-orient: vertical必须成对出现，且不能被其他 display 值覆盖（比如text标签默认是 inline，直接加这些样式无效） - 容器必须有明确的
width或max-width，且不能是fit-content或依赖内容撑开 - 不能用
text标签直接包裹文字——它会忽略display: -webkit-box；必须换成view或div -
line-height× 行数 ≤max-height，否则 iOS 会放弃截断逻辑（安卓更宽松）
正确写法：用 view 替代 text + 宽高约束
uni-app 中最稳妥的结构是：view 包裹纯文本（避免富文本干扰），并手动控制高度边界。示例：
<view class="multi-ellipsis">{{ longText }}</view>
对应样式（注意单位统一用 upx 或 px，别混用）：
立即学习“前端免费学习笔记（深入）”；
.multi-ellipsis {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4em;
max-height: 2.8em; /* 1.4 × 2 */
width: 100%;
word-break: break-word;
}
- 如果字体大小是
28upx，建议line-height: 1.4+max-height: 78upx（28×1.4×2≈78），比用em更可控 - 禁用
white-space: nowrap——它会让-webkit-line-clamp完全失效 - 不要给该元素设
flex相关属性（如flex: 1），iOS 下可能重置display
富文本（rich-text）场景怎么处理
rich-text 内部无法直接应用 -webkit-line-clamp，因为它的子节点是动态解析的 DOM 片段，样式穿透不了。可行方案只有两个：
- 在 JS 层做文本截断：用
String.prototype.substr()或正则粗略按字符数截取（比如 60 字符），再拼接"..."；适合内容结构简单、无格式要求的场景 - 外层套
view并设固定高度 +overflow: hidden，但省略号不会自动出现——只能靠视觉裁剪，用户感知差 - 真要保留富文本+省略号，得改用服务端返回「摘要字段」，前端只渲染摘要，点开再拉全文
真机测试最容易漏掉的三个点
模拟器和安卓跑通 ≠ iOS 可用。上线前务必在 iOS 真机检查：
- 是否用了
text标签？哪怕只有一处，整个截断就崩——全局搜索替换为view - 父容器有没有
flex: 1或position: absolute？它们可能导致子元素 width 计算为 0 - 字体用了自定义
@font-face吗？iOS 对非系统字体的行高计算不稳定，建议先用system-font排查
多行省略号不是“写了就有效”的 CSS 属性，它是 WebKit 内核里一条脆弱的渲染路径，任何一环松动，iOS 就直接放弃显示省略号，只留空白或错位换行。
