css的text-overflow:ellipsis单行省略在小程序（尤其微信）基本不可靠，-webkit-line-clamp多行省略在ios真机上极易失效；必须用js动态检测+view容器控制，否则跨端必翻车。
直接说结论：css 的 text-overflow: ellipsis 单行省略在小程序（尤其微信）基本不可靠，-webkit-line-clamp 多行省略在 ios 真机上极易失效——必须用 js 动态检测 + view 容器控制，否则跨端必翻车。
为什么 text-overflow: ellipsis 在小程序里不生效
因为 <text></text> 组件在微信小程序中不支持 white-space: nowrap 和 text-overflow 的组合；H5 虽能跑通，但真机调试时你会发现文字照常撑开、没截断。这不是你写错了样式，而是平台限制——<text></text> 是轻量级原生文本节点，渲染能力有限。
- 必须换成
<view></view>包裹文字，它支持完整 CSS 盒模型 - 不能用
v-html或<rich-text></rich-text>直接套样式，它们内部 DOM 不受父级样式穿透影响 - 如果用了
flex布局（比如flex: 1），iOS 下可能重置display: -webkit-box，导致-webkit-line-clamp失效
-webkit-line-clamp 在 iOS 真机上失效的硬性条件
iOS Safari（含 uni-app 所有 iOS WebView）要求所有条件同时满足，缺一不可：
-
display: -webkit-box和-webkit-box-orient: vertical必须成对出现，且不能被其他display值覆盖 - 容器必须有明确
width或max-width（不能是fit-content或未设宽的 flex 子项） -
line-height × 行数 ≤ max-height，比如line-height: 32upx、显示 2 行，则max-height: 64upx，多 1upx 都可能让 iOS 放弃截断 - 绝对禁止
white-space: nowrap——它会让-webkit-line-clamp完全失效
示例正确写法：
.ellipsis-2lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
line-height: 32upx;
max-height: 64upx;
width: 100%;
word-break: break-word;
}
跨端真正可靠的方案：JS 检测 + v-if 控制显隐
靠字符数截断（如 str.substr(0, 40)）不准：中英文、emoji、字体宽度不同，同一字符数在不同设备上占位差异大。必须用 uni.createSelectorQuery() 实测高度。
- 不能在
onLoad或mounted同步执行，得等 DOM 渲染完成，用nextTick()或setTimeout(..., 0) -
exec是异步回调，别在exec外部直接读取this.needExpand - 用
v-if而不是v-show切换——收起状态只渲染前 N 字符，避免长列表页内存暴涨 - 行高阈值建议抽成变量，比如
lineHeight: 32、maxLines: 2，方便后续统一调整
关键逻辑片段：
methods: {
checkOverflow() {
const query = uni.createSelectorQuery().in(this)
query.select('#text-container').boundingClientRect()
query.exec((res) => {
if (!res[0]) return
const { height } = res[0]
this.needExpand = height > 64 // 32upx × 2
})
}
}
富文本（<rich-text></rich-text>）或 v-html 场景怎么处理
<rich-text></rich-text> 内部节点无法被外部 CSS 样式穿透，-webkit-line-clamp 完全无效。可行路径只有两条：
- 在 JS 层做粗略截断：用
String.prototype.substring()或正则按字数切（比如最多 60 字符），再拼"…"，适合无格式纯文本 - 外层套
<view></view>并设固定max-height+overflow: hidden，但省略号不会自动出现——只能靠视觉裁剪，体验差，慎用 - 若必须保留富文本结构，可将
<rich-text></rich-text>替换为字符串模板，把内容包裹进带-webkit-line-clamp的<div> 再传给 <code>v-html（注意 XSS 风险）最易忽略的一点：iOS 上
line-height单位混用（比如 upx 和 em 混搭）会导致max-height计算失准，进而让-webkit-line-clamp失效——统一用 upx 或 px，别混。
