移动端H5 文本超过一定行数显示省略号，在省略号后面添加折叠按钮

代码如下：

<template>
  <div class="main">
    <div class="cont">
      <div class="basic-info">
        <div class="title">{{meetingInfo.meetingName}}</div>
        <div class="descript"
          :class="{fold: meetingInfo.introduce.length > 130 && isFold}">
          {{meetingInfo.introduce}}
          <span class="more no-fold"
            v-show="meetingInfo.introduce.length > 130 && isFold"
            @click="handleFold()"><i>...</i>查看全部</span>
          <span class="more"
            v-show="meetingInfo.introduce.length > 130 && !isFold"
            @click="handleFold()">收起全部</span>
        </div>
      </div>
      <div class="place-time">
        <ul class='basic-list'>
          <li class='basic-item'>
            <span class='item-icon address'></span>
            <span class='item-text'>{{meetingInfo.address}}</span>
          </li>
          <li class='basic-item'>
            <span class='item-icon time'></span>
            <span class='item-text time'>{{meetingInfo.meetingTime}}</span>
          </li>
        </ul>
        <div class="time-interval">
          <p class="text">10:30</p>
          <p class="icon-interval"></p>
          <p class="text">12:00</p>
        </div>
        <div class="btn"
          @click="onJump()">签到</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isFold: true,
      meetingInfo: {
        meetingName: '这是一个很长很长很很长很长很的会议标题',
        introduce: '个人的生命都是一次单程的旅行，不管你的路是长还是短，只要终点一到，所有生命以外的东西都得卸下，不论是金钱财富，还是功名利禄，所有你昔日苦苦追求而来的都不会带走一丝一毫。个人的生命都是一次单程的旅行，不管你的路是长还是短，只要终点一到，所有生命以外的东西都得卸下，不论是金钱财富，还是功名利禄，所有你昔日苦苦追求而来的都不会带走一丝一毫。个人的生命都是一次单程的旅行，不管你的路是长还是短，只要终点一到，所有生命以外的东西都得卸下，不论是金钱财富，还是功名利禄，所有你昔日苦苦追求而来的都不会带走一丝一毫。个人的生命都是一次单程的旅行，不管你的路是长还是短，只要终点一到，所有生命以外的东西都得卸下，不论是金钱财富，还是功名利禄，所有你昔日苦苦追求而来的都不会带走一丝一毫。个人的生命都是一次单程的旅行，不管你的路是长还是短，只要终点一到，所有生命以外的东西都得卸下，不论是金钱财富，还是功名利禄，所有你昔日苦苦追求而来的都不会带走一丝一毫。个人的生命都是一次单程的旅行，不管你的路是长还是短，只要终点一到，所有生命以外的东西都得卸下，不论是金钱财富，还是功名利禄，所有你昔日苦苦追求而来的都不会带走一丝一毫。',
        meetingTime: '2021年05月12日',
        address: '上海市徐汇区肇嘉浜路五洲国际大厦8楼801室',
        startTime: '10:30',
        endTime: '12:00'
      }
    }
  },
  methods: {
    onJump () {
      this.$router.push({ name: 'signResult' })
    },
    handleFold () {
      this.isFold = !this.isFold
    }
  }
}
</script>
<style lang="stylus" scoped>
.main
  width 100%
  min-height 100vh
  background url('~assets/img/sign_bg@3x.png') no-repeat center top/ 100% auto
  padded_box(border-box,24px 12px)
  .cont
    width 100%
    background #fff
    border-radius 12px
    .basic-info
      width 100%
      padded_box(border-box,24px 12px)
      position relative
      &::after
        content ''
        display block
        width calc(100% - 26px)
        height: 1px;
        background-image: linear-gradient(to right, #eee 0%, #eee 50%, transparent 50%);
        background-size: 10px 1px;
        background-repeat: repeat-x;
        position absolute
        bottom 0
        left 50%
        transform translate(-50%, 0)
      .title
        width 100%
        height 22px
        line-height 22px
        font-size 16px
        font-weight 700
        color #333
        noWrap()
      .descript
        line-height 20px
        font-size 14px
        color #666666
        margin-top 8px
        position relative
        &.fold
          height 100px
          ellipsis(5)
        .more
          float right
          line-height 20px
          font-size 12px
          color #0080ff
          &.no-fold
            float none
            display inline-block
            background #fff
            position absolute
            right 0
            bottom -1px
            i
              font-size 14px
              color #666
              margin-right 12px
    .place-time
      width 100%
      padded_box(border-box,24px 10px 40px)
      .basic-list
        padded_box(border-box,0 2px)
        .basic-item
          display flex
          align-items center
          & + .basic-item
            margin-top 12px
          .item-icon
            flex none
            width 16px
            height 16px
            margin-right 6px
            bgCover()
            &.time
              background-image url('~assets/img/icon_time@3x.png')
            &.address
              background-image url('~assets/img/icon_location@3x.png')
          .item-text
            width calc(100% - 22px)
            height 20px
            font-size: 14px;
            color: #666666;
            line-height: 20px
            noWrap()
            &.time
              font-size 16px
      .time-interval
        width 100%
        display flex
        justify-content center
        align-items center
        margin-top 4px
        .text
          line-height 56px
          font-size 40px
          font-weight 700
          color #333
        .icon-interval
          width 40px
          height 40px
          background url('~assets/img/icon_to@3x.png') no-repeat center / 100%
          margin 0 24px
      .btn
        width 100%
        height 42px
        background #0080FF
        line-height 42px
        text-align center
        font-size 14px
        color #fff
        border-radius 21px
        margin-top 32px
</style>

效果图如下：