vue中实现文字折叠展开

需求：
默认展示一行，超出一行需支持展开收起
效果：

image.png

      <div class="d-flex">
        <div class="mb-4 ms-4 isToggle" :class="isToggle && 'toggle'"> 驳回采购单号：{{ rejectOrderList }} </div>
        <div v-if=" rejectOrderList && rejectOrderList.length>5" class="ms-4" style="margin-top:-6px;">
          <el-button size="mini" type="text" @click="isToggle=!isToggle">{{ isToggle?'收起':'展开' }}<i class="el-icon--right " :class="isToggle?'el-icon-arrow-up':'el-icon-arrow-down' " /></el-button>
        </div>
      </div>
      <div class="title mb-4 ms-4"> 应还款总金额: {{ totalNum }} </div>

<script>
  data() {
    return {
      isToggle: false
  }}
</script>
  
<style scoped lang="scss">
.d-flex{
  display: flex;
}
.isToggle{
  height: 16px;
  overflow: hidden;
  transition: all 0.25s ease;
  &.toggle{
   height: auto;
  }
}
</style>

如果要实现收起时文字全部隐藏，展开时文字才展示，样式需改一下

  .isToggle{
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: all 0.25s ease;
    &.toggle{
      opacity: 1;
      height: auto;
    }
  }