最稳方案是用v-if切换全文与截断文本，配合-webkit-line-clamp实现展开/收起；需注意兼容性、点击热区及响应式更新。
uni-app里用v-if控制「展开/收起」状态最稳
直接用v-if切换全文和截断文本，比v-show更可靠——因为v-show只是CSS隐藏，折叠后仍占布局空间，可能撑开容器或影响滚动高度。尤其在scroll-view或列表中，容易出现滚动错位或高度计算异常。
关键点是：用一个布尔值（如isExpanded）控制显示逻辑，配合text-overflow: -webkit-line-clamp做初始截断。注意-webkit-line-clamp仅对块级、display: -webkit-box元素生效，且需同时设overflow: hidden和word-break: break-word。
示例结构：
<view class="text-container" :class="{ expanded: isExpanded }">
<text class="text-content">{{ content }}</text>
</view>
<view @click="toggleExpand" class="expand-btn">
{{ isExpanded ? '收起' : '展开全文' }}
</view>
对应样式：
.text-container {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.text-container.expanded {
-webkit-line-clamp: unset;
height: auto;
}
uni-app中getComputedStyle无法获取-webkit-line-clamp实际行数
别试图用uni.createSelectorQuery()查元素当前是否溢出——-webkit-line-clamp是渲染层行为，JS拿不到“被截了几行”这个值。强行测高度对比也容易因字体加载、字号缩放、iOS系统字体差异而误判。
更务实的做法是：预设一个安全字数阈值（比如200字符），或服务端返回摘要+全文两个字段。前端只做开关，不负责判断“该不该收”。这样避免在不同机型上反复调试。
如果必须动态判断，可用以下保守方案：
- 用
uni.getSystemInfoSync().platform === 'ios'区分平台，iOS下-webkit-line-clamp更稳定，Android部分低端机可能不支持 - 给
text-content加id，用uni.createSelectorQuery().select("#text-id").boundingClientRect()查height，但要等onReady后执行，且首次渲染可能不准 - 始终 fallback 到「点击即展开」，不依赖自动识别
微信小程序基础库低于2.11.0时-webkit-line-clamp失效
uni-app编译到微信小程序时，若目标用户基础库版本低（比如还在用2.7.x的政务类App），-webkit-line-clamp会完全不生效，文本直接全部显示。这时候不能只靠CSS。
可行替代方案是用canvas或rich-text做字数截断，但成本高；更轻量的是在JS层手动切字符串：
const truncated = content.length > 150 ? content.slice(0, 150) + '...' : content;
注意两点：
- 中文字符、emoji、全角符号长度都是1，
String.prototype.length可直接用，无需正则匹配 - 避免在
computed里反复slice，应缓存truncatedContent和fullContent两个变量 - 若内容含
<br>或换行符\n，需先replace(/\s+/g, ' ')归一化空白，否则截断位置可能卡在空格前
点击区域小导致iOS上「收起」按钮点不中
真机测试常见问题：按钮文字只有「收起」两个字，iOS Safari默认最小点击热区44px，小于这个尺寸容易点偏或触发两次。uni-app里view默认无内边距，容易踩坑。
解决方法很简单：
- 给
expand-btn加padding: 8px 16px，确保宽高≥44px - 用
cursor: pointer（H5端）或hover-class（小程序端）提供反馈 - 避免把
@click绑在text标签上——text不是块级，iOS下点击区域更不可靠，统一用view包裹
另外，别在toggleExpand里写this.isExpanded = !this.isExpanded这种直赋值，要用this.$set或定义在data里确保响应式更新，否则切换无效。
复杂点在于多行文本的视觉一致性：Android和iOS对-webkit-line-clamp的行高计算有细微差异，同一段文字在不同系统上可能差半行。如果设计要求严丝合缝，就得放弃纯CSS方案，改用固定行高+字数截断+服务端摘要三者结合。
