App端必须放弃字符数截断，因其无法感知DOM渲染与设备差异，导致中英文混排错位、emoji显示异常及字体缩放溢出；应改用createSelectorQuery测量真实高度并动态截断。
App端不能用 CSS 过滤器截断文字
uni-app 的 filters 是 Vue 2 的模板语法糖，本质是函数调用，它只处理字符串输入输出，**不感知 DOM 渲染、不测量高度、不响应设备差异**。在 App 端（iOS/Android），直接用 str => str.substr(0, 20) 这类过滤器做截断，会出三类问题：中英文混排错位、emoji 占两字符但视觉占一行、字体缩放后实际宽度溢出容器。这不是过滤器写错了，而是它根本没能力解决「是否真的溢出」这个 Layout 问题。
为什么 App 端必须放弃字符数截断
App 端 WebView（尤其是 iOS WKWebView）对文本渲染有 sub-pixel 精度要求，且不同字号/rpx 转换存在小数像素偏差。实测发现：
-
substr(0, 30)在 iPhone SE 上刚好两行，在 iPhone 15 Pro 上第三行首字被截半 - 含 emoji 的字符串，
"??你好"长度为 4，但渲染宽度 ≈ 3 个中文字符 - 使用
font-size: 28rpx时，rpx → px 计算结果带小数（如 28 × 0.5 = 14.2px），line-height和max-height若未严格匹配，-webkit-line-clamp直接失效
App 端真正可用的截断方案：createSelectorQuery + v-if
必须用真实 DOM 测量代替字符串计算。关键点不是“怎么截”，而是“截多少才刚好不溢出”：
- 外层容器必须用
<view>，禁用<text>—— 后者在 App 端不支持boundingClientRect()查询完整盒模型 - 测量时机必须在
this.$nextTick(() => { ... })或setTimeout(() => { ... }, 0)中，否则exec()返回null - 阈值不能硬编码像素值，要基于
fontSize动态算：maxHeight = fontSize * lineClamp * 1.4（1.4 是 lineHeight 倍数） - 截断逻辑别写在过滤器里，应放在
methods中，用v-if="isExpanded"控制全文渲染，避免长列表内存爆炸
示例核心代码：
checkOverflow() {
const query = uni.createSelectorQuery().in(this)
query.select('#text-container').boundingClientRect()
query.exec(res => {
if (!res[0]) return
const lineHeight = this.fontSize * 1.4
const maxHeight = lineHeight * this.lineClamp
this.needExpand = res[0].height > maxHeight
})
}容易被忽略的 App 端兼容细节
App 端比小程序更难搞定省略效果，因为：
- Android WebView 版本碎片化严重，部分低版本不支持
-webkit-line-clamp，必须降级为 JS 截断 + 手动拼接"…展开" - iOS App 内嵌 WebView 默认启用 viewport 缩放，若页面 meta 里写了
user-scalable=yes，字体渲染宽度会浮动，导致测量结果每次都不一样 - 使用
uni.canvasToTempFilePath导出带文字的图片时，JS 截断后的字符串不会自动同步到 canvas 绘制内容里——得手动重绘
最稳的做法：App 端默认关闭 CSS 截断，全部走 JS 测量 + v-if 显隐。哪怕多一次异步查询，也比真机上文字突然撑破卡片强。
