文字过长显示tooltip

前几天遇到一个问题：文字过长显示tooltip，反之不展示

方法一：
    文字超过12个字符剩余部分用省略号代替，展示tooltip

<el-tooltip class="item" effect="dark" content="title" placement="top" :disabled="title.length> 12">
      <span>{{title.lenght>12?"title.slice(0, 12) + '...'":"title"}}</span>
</el-tooltip>

    如果要做页面齐其效果，可能就有点不太美观，因为相同宽度的的盒子实际存放的数字，字母和汉字个数不同。这时可以采用如下方法：

方法二：
分为3部：1.写一个el-tooltip，里面添加两个元素div、span
                 2.给父元素设置样式：
                  （1）添加宽度，
                  （2）内容固定显示一行显示，
                  （3）超出部分用省略号代替
                3.鼠标移入文字判断内容的宽度是否超出盒子的宽度，超出使用el-tooltip。

    <el-tooltip
      class="item"
      effect="dark"
      :disabled="isShowTooltip"
      :content="content"
      placement="top"
    >
      <div
        class="over-flow"
        @mouseover="onMouseOver('refName')"
      >
        <span ref="refName">{{ content }}</span>
      </div>
    </el-tooltip>

export default {
  data() {
    return {
      isShowTooltip: true,
      content:'内容'
    };
  },
  methods: {
    onMouseOver(str) {
      let parentWidth = this.$refs[str].parentNode.offsetWidth;
      let contentWidth = this.$refs[str].offsetWidth;
      // 判断是否开启tooltip功能
      if (contentWidth > parentWidth) {
        this.isShowTooltip = false;
      } else {
        this.isShowTooltip = true;
      }
    }
  }
};

.over-flow {
  width: 80px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
p {
  margin: 0;
}