html代码：

<view class="desc_box"><view id="desc" class="desc" :class="open ? 'open' : 'three'">{{ data.desc }}</view><view class="expand theme-color" @click="unfold" v-if="unfoldShow">{{ open ? '收起' : '展开' }}<i class="iconfont icon-xiala" :class="open ? 'up' : ''"></i></view>
</view>

js代码：

data的部分：

// 是否打开
open: true,
// 是否展开
unfoldShow: false

methods的部分：

/*** 展开收起*/
unfold() {this.open = !this.open;
},
/*** 判断是否超过三行*/
checkTextLines() {// 获取 <div> 标签的节点信息let query = uni.createSelectorQuery().in(this);query.select('.desc_box').boundingClientRect(data => {// 获取文本内容的高度let height = data.height - 70;console.log("data", data);console.log("height", height);// 行高为28pxlet lineHeight = 28;// 计算文本行数let lines = Math.ceil(height / lineHeight);// 判断文本行数是否达到了3行if (lines > 3) {console.log("文本达到了3行以上");this.unfoldShow = true;this.open = false;} else {console.log("文本3行或3行以下");this.unfoldShow = false;this.open = true;}}).exec();
}

在获取完数据的地方调用this.checkTextLines();

css部分：

.desc_box {width: 686rpx;background: linear-gradient(180deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0.51) 100%);box-shadow: inset 0rpx 2rpx 6rpx 0rpx rgba(255,255,255,0.5), inset 0rpx -2rpx 6rpx 0rpx rgba(255,255,255,0.5);border-radius: 8rpx;backdrop-filter: blur(12px);margin-top: 24rpx;padding: 24rpx 20rpx;box-sizing: border-box;display: flex;flex-direction: column;align-items: flex-end;.desc {width: 100%;margin-top: 16rpx;color: #666666;line-height: 40rpx;white-space: pre-line;}.expand {display: flex;font-size: 24rpx;height: 34rpx;line-height: 34rpx;i {font-size: 24rpx;margin-left: 4rpx;}.up {transform: rotate(180deg);}}
}.one {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}.two {overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; 
}.three{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3; 
}