文本溢出时显示省略号“...”。并且在hover时显示气泡tooltip展示完整内容。
优点：tooltip气泡只在已经溢出的文本上显示，不溢出时不显示气泡。

<template>
  <el-tooltip class="item" effect="dark" :content="$slots.default[0].text" placement="top-start" :disabled="!show">
    <span ref="text" class="hidden-text" :style="{ width: width }">
      {{ $slots.default[0].text }}
    </span>
  </el-tooltip>
</template>

<script>
export default {
  name: 'HiddenSpan',
  props: {
    width: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      show: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.calc()
    })
  },
  methods: {
    calc() {
      const text = this.$refs.text
      this.show = (text.scrollWidth > text.clientWidth)
    }
  }
}
</script>

<style scoped>
.hidden-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  white-space: nowrap;
}
</style>