iOS真机上-webkit-line-clamp失效因需同时满足display:-webkit-box、-webkit-box-orient:vertical、overflow:hidden及精确max-height等条件，且text组件不支持该属性，须用view并注意字体渲染与sub-pixel精度问题。
uni-app里-webkit-line-clamp为什么在iOS真机上不生效
因为 iOS Safari 对 -webkit-line-clamp 的支持依赖于完整渲染链：必须同时满足 display: -webkit-box、-webkit-box-orient: vertical、overflow: hidden，且容器需有**明确宽度 + 固定 line-height + 精确 max-height（= line-height × 行数）**。iOS 真机常因字体渲染差异或父容器 flex 布局未收敛，导致高度计算偏差，-webkit-line-clamp 直接失效。
常见错误现象：
-
text组件内直接写-webkit-line-clamp—— 小程序平台不支持text的盒模型属性，必须用view - 只设
height没设max-height—— iOS 下height会强制拉伸容器，破坏截断逻辑 - 使用
rpx定义line-height或max-height—— rpx 在不同屏幕缩放后可能产生小数像素，iOS 渲染引擎对 sub-pixel 高度敏感，易跳过截断
uni-app多行省略必须用view而不是text
text 组件在小程序平台被编译为原生文本节点（如微信的 text 标签），它不支持弹性盒模型、line-clamp 等 CSS 属性；而 view 编译为 div 或视图容器，能完整承载 WebKit 私有样式。这是跨端一致性的底层前提。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有需要省略的文本，外层一律用
<view class="ellipsis-2">{{ content }}</view>，禁用<text></text> - 在
<style scoped></style>中定义类，避免全局污染：.ellipsis-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 1.4em; max-height: 2.8em; width: 100%; } - 若内容含富文本（如
v-html），需在外层view上加overflow: hidden，内部子元素不能脱离文档流（禁用position: absolute）
安卓正常但iOS真机失效时的兜底方案
当 CSS 截断不可靠（尤其 iOS 低版本或复杂嵌套布局），必须引入 JS 动态截断。核心是用 createSelectorQuery 测量真实渲染高度，再反推可显示字符数。
关键点：
- 不能依赖字符串长度（中文/英文/emoji 占位不同），应基于
fontSize和lineHeight估算每行字数 - 首次渲染后调用
this.$nextTick(() => { query.exec() })，否则查询不到 DOM 尺寸 - 截断后手动拼接
"…展开"，并用v-if控制完整文本显隐，避免 SSR 与客户端不一致 - 性能注意：每个省略文本都做 query 会卡顿，建议节流或仅对 visible 区域内元素执行
不显示省略号的纯CSS多行截断怎么写
如果设计要求“截断但不出现 …”，就不能用 text-overflow: ellipsis，而是靠精确高度控制 + overflow: hidden。这在卡片列表、标签云等场景更干净。
示例写法：
.truncate-3 { line-height: 1.5em; height: calc(3 * 1.5em); overflow: hidden; }
注意：
-
height必须用calc()或固定值，不能是max-height—— 后者允许内容撑开容器，失去截断意义 - 必须关闭换行：
white-space: normal（默认），但禁止word-break: break-all，否则可能在单词中间断开，影响可读性 - 该方案在 H5 / 小程序 / App 三端均稳定，但需确保字体加载完成后再测量，否则
line-height可能失准
最麻烦的其实是字体加载时机和 iOS 的 sub-pixel 渲染——哪怕 CSS 写对了，真机上仍可能差 0.5px 导致一行多出半个字。所以别只信模拟器，每次改完必须拿 iOS 真机连 devtools 抓 computed style 看实际 height。
