文字环抱，展开收起

 

<view style="display: flex;">
							<view class="message-center  text-ellipsis font-sizt-26 clr-min" :class="allTextShow ? 'all-text-active' : ''">
								<view class="clr-theme btn" @click="allTextShow=!allTextShow">{{allTextShow ? '收起' : '全文'}}</view>
								这个科普真的是太棒啦太有帮助了啦啦啦这个科普真的是太棒啦太有帮助了啦啦啦这个科普真的是太棒啦太有帮助了啦啦啦这个科普真的是太棒啦太有帮助了啦啦啦这个科普真的是太棒啦太有帮助了啦这个科普真的是太棒啦太有帮助了啦这个科普真的是太棒啦太有帮助了啦啦啦这个科普真的是太棒啦太有帮助了啦啦啦这个科普真的是太棒啦太有帮助了啦啦啦这个科普真的是太棒啦太有帮助了啦啦啦这个科普真的是太棒啦太有帮助了啦这个科普真的是太棒啦太有帮助了啦
							</view>
						</view>

allTextShow:false

 

.text-ellipsis{
    overflow: hidden;
	text-overflow: ellipsis; //显示省略号
	-webkit-line-clamp: 2; //最多2行
	display: -webkit-box;
	-webkit-box-orient: vertical;
	white-space: normal;
}
.clr-min{

 color:#333;

}
.clr-theme{
color: #FFA346;
}

.font-sizt-26{
  font-size: 26rpx;
}

.message-center{
						margin-bottom: 20rpx;
						  -webkit-line-clamp: 5;
						.btn{
							clear: both;
							float: right;
							margin-right: 22rpx;
						}
						
					}
					.all-text-active{
						-webkit-line-clamp: 1000;
					}
					.message-center::before{
						content: '';
						float: right;
						height: calc(100% - 34rpx);
					}