uni-app跨端省略需规避平台限制：小程序单行用view+overflow:hidden/white-space:nowrap；ios多行需view+display:-webkit-box/-webkit-box-orient:vertical+精确max-height；推荐js动态测高+ v-if 控制显隐。
uni-app 里直接用 text-overflow: ellipsis 或 -webkit-line-clamp 基本不可靠，尤其在小程序和 iOS 真机上——不是你代码写错了，而是平台限制和渲染链断裂导致的。
为什么 text-overflow: ellipsis 单行省略在小程序里不生效
微信小程序的 <text></text> 组件是原生轻量节点，不支持 white-space: nowrap 和 text-overflow 的组合。H5 可能跑通，但真机调试时文字照常撑开。
必须换成 <view></view> 包裹，并确保：
• 容器有明确 width 或 max-width
• 设置 display: inline-block 或 block（不能是默认 inline）
• overflow: hidden 和 white-space: nowrap 同时存在
• 小程序中别加 -ms-text-overflow，没用
为什么 -webkit-line-clamp 在 iOS 真机上失效
iOS Safari 对该属性有硬性依赖：所有条件缺一不可：
• 外层必须是 <view></view>，禁用 <text></text> 或 <rich-text></rich-text>
• display: -webkit-box 和 -webkit-box-orient: vertical 必须成对出现，且不能被 flex、grid 等覆盖
• line-height × 行数 ≤ max-height，比如 line-height: 32upx、显示 2 行，则 max-height: 64upx；多 1upx 都可能跳过截断
• 禁用 white-space: nowrap（它会让 -webkit-line-clamp 直接失效）
• 单位统一用 upx 或 px，别混用 em 和 upx，iOS 对 sub-pixel 高度敏感
真正跨端可靠的方案：JS 动态检测 + v-if 控制显隐
靠字符数截断（如 substr(0, 40)）不准，中文/英文/emoji 渲染宽度差异大。必须实测 DOM 高度：
• 用 uni.createSelectorQuery()，不是 document.querySelector（小程序里不存在）
• 在 this.$nextTick(() => { query.exec() }) 中调用，否则查不到真实尺寸
• 阈值按 lineHeight × maxLines 计算，建议存为 data 变量方便调整
• 收起状态只渲染前 N 字符，用 v-if 而非 v-show，避免长列表内存暴涨
• 富文本场景（v-html 或 <rich-text></rich-text>）无法穿透样式，只能 JS 截断后手动拼接“…展开”
容易被忽略的关键点
安卓看着正常不代表 iOS 没问题；flex: 1 容器下 display: -webkit-box 可能被重置；rpx 算出的 max-height 在不同屏上产生小数像素，iOS 渲染引擎会直接放弃截断；富文本内部子节点不受父级 -webkit-line-clamp 影响——这些不是边缘 case，而是日常上线必踩的坑。
