vue3项目中文字太多超过3行显示省略号和查看更多按钮

项目中设计的介绍文字较多，需求是超过三行显示省略号和查看更多按钮，这种看似简单，写起来也需要花费些心思，效果和主要代码如下：

1.试图部分

<div class="yuanqu-con">
        <div class="text" v-if="isAll == 0" ref="myDiv">
          <span class="btn" @click="lookmore" v-if="isMore == 1">查看更多</span>
          <div class="text-con" ref="textMore">
            {{ baseData.desc }}
          </div>
        </div>
        <div v-if="isAll == 1">
          {{ baseData.desc }}
        </div>
      </div>

2.判断内容高度是否显示查看更多按钮

nextTick(() => {
          // 判断div的高度是否显示按钮
          if (textMore.value.clientHeight >= myDiv.value.clientHeight) {
            isMore.value = 1
          } else {
            isMore.value = 0
          }
        })

3.点击查看更多按钮展示全部内容

const isAll = ref(0)
  const lookmore = () => {
    isAll.value = 1
  }

4.css相关

 .yuanqu-con {
        width: 1139px;
        font-size: 14px;
        color: #202332;
        /* line-height: 22px; */

        .text {
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .text::before {
          content: '';
          float: right;
          height: 43px;
          /*先随便设置一个高度*/
          background: #fff;
        }

        /* .text::after {
            content: '';
            width: 100%;
            height: 65px;
            position: absolute;
            background: #fff;
            } */
        .btn {
          float: right;
          clear: both;
          cursor: pointer;
          color: #4876ff;
        }
      }
    }