css文字溢出点击展开收起

<view class="shop" :class="{show:item.isShowAll}" @click="showAll(item)">
                <text class="upa" :class="{down:!item.isShowAll}"></text>
                <text>
                  <text class="sy">112</text>
                  <text class="sp">
                    aaa
                  </text>
                </text>
              </view>





.shop{
          position: relative;
          font-size: 24rpx;
          color: #000;
          border-radius:  0 0 13px 13px;
          padding: 0 24rpx;
          padding-right: 39rpx;
          margin: 24rpx 0;
          overflow: hidden; //超出的文本隐藏
          display: -webkit-box;
          -webkit-line-clamp: 1; // 设置从第几行后开始省略
          -webkit-box-orient: vertical;
          /** 占位：占高度，宽度设为0px**/
          &::before {
            content: '';
            float: right;
            width: 0px;
            height: 32px; //之前这里是100%,但是这样不能兼容ios，所以需要改成具体的值
            margin-bottom: -32px; /**和主体行高一样**/
          }
          /**遮挡方块：和.overflowtext-box背景颜色设置一样的，为了在不溢出文字的时候遮挡展开按钮**/
          &::after {
              content: '';
              width: 100%;
              height: 32px; //之前这里是100%,但是这样不能兼容ios，所以需要改成具体的值
              position: absolute;
              background-color: #fff;
          }
          .upa {
              float: right;
              clear: both;
              &::after {
                display: inline-block;
                position: absolute;
                right: 8rpx;
                width: 45rpx;
                height: 45rpx;
                content: '';
                color: #006eff;
                background: url(https://welifestatic.oss-cn-beijing.aliyuncs.com/images/icon_ex.png) no-repeat center center;
                background-size: 100% 100%;
            }
          }
          &.show{
            -webkit-line-clamp: 100000000; // 设置从第几行后开始省略
            .upa {
                &::after {
                  display: inline-block;
                  position: absolute;
                  width: 45rpx;
                  height: 45rpx;
                  content: '';
                  color: #006eff;
                  background: url(https://welifestatic.oss-cn-beijing.aliyuncs.com/images/icon_re.png) no-repeat center center;
                  background-size: 100% 100%;
                  position: absolute;
                  right: 8rpx;
                  bottom: 0;
                  z-index: 1;
              }
            }
          }
          .sy{
            color: #333;
            margin-right: 30rpx;
          }
          .inbl{
            display: inline-block;
          }
        }