点击展开阅读全文--收起2版新增

 在项目中直接可以拿去用

<template>

			<!-- 点击展开阅读全文  -->
			<view class="xqnrbox" >
				<rich-text class="xqnr" :style="{display:xqnrdisplay}" :nodes="这是你的内容自行替换"></rich-text>
				<view class="xqnrname" @click="showdes()">
					<view class="text2">{{showdesname}}</view>
				</view>
			</view>

</template>

data(){
  return{
              showdesname: '阅读全文',
				xqnrdisplay: '-webkit-box',
				desseldisplay: '-webkit-box',
}
}

点击事件
// 点击阅读全文
			showdes() {
				if (this.xqnrdisplay == '-webkit-box') {
					this.showdesname = '收起';
					this.xqnrdisplay = 'block';
				} else if (this.xqnrdisplay == 'block') {
					this.showdesname = '阅读全文';
					this.xqnrdisplay = '-webkit-box';
				}
			},

css样式
.xqnrbox {
		position: relative;
		padding: 0 30upx;
	}

	.xqnr,
	.xqnr>p {
		color: #555450;
		font-size: 28upx;
		line-height: 2;
		margin: 40upx 0upx;
		/* display: -webkit-box; */
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}

	.xqnrname {
		color: #555450;
		position: absolute;
		bottom: -40upx;
		right: 38upx;
		font-size: 28upx;
		// background-color: #fff;
		font-weight: 600;
		width: 132rpx;
		text-align: right;
	}

	.xqnrname .text2 {
		color: #34A3F2;
	}

第二版 :

<view class="xqnrbox" v-if="item.reminder">
		<view :class="{ 'expanded': expanded }" class="activity-list-remin">
            {{ item.reminder }}
         </view>
		<view class="read-more" @click="toggleExpanded">
             {{ expanded ? '收起' : '展开' }} 
        </view>
</view>

expanded: false, //在data中设置

//点击事件
 toggleExpanded() {
			    this.expanded = !this.expanded;
  },

//css 
	.activity-list-remin {
	  font-size: 24rpx;
	  font-family: PingFang SC, PingFang SC;
	  font-weight: 400;
	  color: #999999;
	  line-height: 160%;
	  text-indent: 2em;
	  margin-top: 12rpx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  word-wrap: break-word;
	  display: -webkit-box;
	  -webkit-line-clamp: 2; /* 默认显示两行 */ 更改这个 默认显示几行
	  -webkit-box-orient: vertical;
	}
	
	.expanded {
	  -webkit-line-clamp: initial; /* 显示所有内容 */
	  overflow: visible; /* 取消溢出隐藏 */
	}
	
	.read-more {
	  cursor: pointer;
	  color: blue;
	  text-align: right;
	}