vue2+elmentui实现文字单行超长省略号，并鼠标滑过冒泡，通常用于表格超长文本弹框固定宽度换行，自定义页面超长文字隐藏显示

 1，我基于elementui的el-tooltip组件封装，这里固定了弹框的宽度让内容换行，（注意基于tooltip组件的二次封装，要去掉scoped属性，让样式映射否则设置宽度无效，这里我也是遇到一个小坑）

<template>
  <el-tooltip
    effect="dark"
    popper-class="popperClass"
    :content="content"
    placement="top"
  >
    <div class="tooltipcontent">{{ content }}</div>
  </el-tooltip>
</template>
<script>
export default {
  name: '',
  components: {

  },
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  vuex: {

  },
  data () {
    return { }
  },
  computed: {

  },
  watch: {

  },
  beforeCreate () {

  },
  created () {

  },
  beforeMount () {

  },
  mounted () {

  },
  methods: {

  }
}
</script>
<style lang="scss" >
.popperClass{
      max-width: 200px !important;
}
.tooltipcontent{
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
</style>

 1，使案例

  <el-table-column
          prop="opinion"
          label="审批意见"
          align="center"
        >
          <template slot-scope="scope">
            <myTooltip :content="scope.row.opinion" />
          </template>
 </el-table-column>

总结：原生的title属性尝试过网上的方法进行文本换行谷歌浏览器都没用， 而且element的表格实现的超长提示也无法自定义宽度换行，所以自己封装了一个。这里希望大家提供更好的解决方案。