文字的展开与收起


	  <text class="pay-hint-content " :class="ellipsis?'ellipsis':'unellipsis'" >1. 支付成功后,将会推送排队号;就诊当日可直接前往诊室等待叫号就诊,无需再现场缴费、排队。\n2. 已完成支付挂号费用的用户,如在就诊前一日取消预约订单,成功申请取消订单后,正常情况下系统将会在7个工作日内自动退费至用户支付账号内。\n3. 订单在正常状态下(非系统故障、非医生临时停诊)被爽约,由于占用了医院号源,此类订单不予以退费。</text>
	  <view class='bg-white-ellipsis'>
		<view class="img-ellipsis"  @click='ellipsis1'>
			{
    
    {
    
    ellipsis?'展开':'收起'}}
		</view>
	  </view>
ellipsis: true, // 文字是否收起,默认收起
ellipsis1: function () {
    
      
			    this.ellipsis = !this.ellipsis;
			}

	.pay-hint-content{
    
    
	  margin-left: 5%;
	  margin-right: 5%;
	  margin-top: 10px;
	  font-size: 13px;
	  color: #888;
	  width: 680rpx;
	  display: -webkit-box;
	  -webkit-box-orient:vertical;
	  text-overflow: ellipsis;
	  overflow:hidden; 
	  /* 通过以上四行实现收缩功能 */
	}
	.ellipsis{
    
    
		/*  最多显示3行 */
	  -webkit-line-clamp:3; 
	  /*  透明度75% */
	  opacity: 0.75 
	}
	.unellipsis{
    
    
		/*  全部显示 */
	
	  -webkit-line-clamp:0; 
	  /*   不透明 */
	  opacity: 1
}

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_45894929/article/details/113106432