Vue文本内容单行或多行超出显示省略号判断，超出显示tooltip提示

开发中经常遇到需要超出文本省略的需求，通常情况下只需要设置css的样式即可实现：

   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;

但是往往产品都是喜欢玩花活的，这天小明提出要实现超出换行并hover时通过tip提示的需求。一想这tm有啥难的。三方组件很多啊，比如element的Tooltip，于是开心的加上了组件实现

<el-tooltip class="item" :disabled="!showTip" effect="dark" :content="businessData.designerName +'-'+businessData.designerTel" placement="top-start">
  <div class="designer-inner" v-if="showDesignerInfo">
  <div ref="isOverflow" class="designer-inner-info designer-inner-info_width" type="textarea">{{ '卡社保卡吧撒空间才能卡啊随-1212123131'}}</div>
    <!-- <div ref="isOverflow" class="designer-inner-info designer-inner-info_width">{{ businessData.designerName +'-'+businessData.designerTel}}</div> -->
  </div>
</el-tooltip>

过一会小明又来了，你这能不能实现不超出时不加tip提示，超出时再加提示啊？我tm一个大逼斗就上去了。但是打归打，需求还是要尽力去实现的。

具体实现方案：

可以通过clientWidth与scrollWidth的比较来判断文本内容是否超出元素

html部分：通过ref获取dom

<el-tooltip class="item" :disabled="!showTip" effect="dark" :content="businessData.designerName +'-'+businessData.designerTel" placement="top-start">
  <div class="designer-inner" v-if="showDesignerInfo">
  <div ref="isOverflow" class="designer-inner-info designer-inner-info_width" type="textarea">{{ '卡社保卡吧撒空间才能卡啊随-1212123131'}}</div>
    <!-- <div ref="isOverflow" class="designer-inner-info designer-inner-info_width">{{ businessData.designerName +'-'+businessData.designerTel}}</div> -->
  </div>
</el-tooltip>

js部分：在合适的时机进行比较

 mounted() {
        this.showTip = this.$refs.isOverflow.clientWidth<this.$refs.isOverflow.scrollWidth;
      }
    },

css部分

.designer-inner-info_width{
    width: 158px;
    height: 32px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
``
# 多行省略判断其实和单行省略判断基本一致

> 样式上修改

```javascript
    width: 200px;
    text-overflow: ellipsis;
    overflow: hidden;
    // white-space: nowrap;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

只需要判断高度比较即可

this.$refs.pisOverflow.clientHeight,this.$refs.pisOverflow.scrollHeight