When the screen size of less than 1440, a line of text into ellipsis

 First get the screen height

 If 1400 or less; add a class

 <Div: class = "[xiaoyu 'isyaoshenglue':? '']"> </ Div> v-bind trinocular binding operation, add a class name in parentheses use

 

How ellipsis div and p can have an ellipsis

div{
     width: 100px;
    overflow: hidden;
    white-space: nowrap;
   text-overflow: ellipsis;
}

 

    <div class="progress-bar-box">
                  <div class="progress-bar-box-div">
                    <div :class="[xiaoyu ? 'isyaoshenglue': '']">人脸签到</div>
                    <el-progress
                      :text-inside="true"
                      :stroke-width="10"
                      :percentage="70"
                      style="width:160px"
                      class="progress-bar"
                    ></el-progress>
                  </div>
                  <div class="progress-bar-box-dec">35/35</div>
     </div>

 

It is defined in a data 

data:{

    pingWidth: "",

    xiaoyu: false // whether to omit

}

mounted() {
    this.pingWidth = document.documentElement.clientWidth;
    console.log("pingkuan", this.pingWidth);
    if (this.pingWidth <= 1400) {
      console.log("1");
      this.xiaoyu = true;
    }
  },

 

.isyaoshenglue {
  width: 55px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}