如何判斷pre標(biāo)簽文本內(nèi)容是否超過三行的問題

最近在做一個需求，當(dāng)文本內(nèi)容超過三行的時候，顯示“展開”，并且顯示省略號，點擊展開后按鈕切換到收起，但存在一個問題，就是不知道如何去判斷文本內(nèi)容是否真的超過三行..

<div class="introduction">
        <span class="introduction_title">教練簡介</span>
        <pre class="introduction_content" id="introduction_content">{{coachesDetailData.introduction}}</pre>
    </div>
    <div class="case-block">
          <div class="introduction_btn" v-show="show" @click="changeStyle">展開</div>
          <div class="introduction_btn" v-show="!show" @click="changeStyle">收起</div>          
    </div>

changeStyle() {
      if (this.show == true) {
        this.show = false;
        document.getElementsByClassName(
          "introduction_content"
        )[0].style.cssText =
          "display: block;float: left;white-space: pre-line;text-align: left;margin-top: size(10);margin-left: size(15);line-height: size(23);font-size: size(14);letter-spacing: 0;color: #888;";
      } else {
        this.show = true;
        document.getElementsByClassName(
          "introduction_content"
        )[0].style.cssText =
          "display: block;float: left;white-space: pre-line;text-align: left;margin-top: size(10);margin-left: size(15);line-height: size(23);font-size: size(14);letter-spacing: 0;color: #888;display: -webkit-box;overflow: hidden;white-space: normal !important;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp: 3;-webkit-box-orient: vertical;";
      }
    }