dy-admin-manager/src/components/overflow-text/index.vue

<template>
  <el-tooltip
    class="tooltip"
    effect="dark"
    placement="top"
    :open-delay="300"
  >
    <template #content>
      <span class="tooltip-content" :class="{split}">{{text}}</span>
    </template>
    <div class="overflow-text" :class="{split}" :style="{width}">
      {{text}}
      </div>
  </el-tooltip>
</template>
<script>
export default {
  name: 'overflow-text',
  props: {
    text: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '200px'
    },
    split: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style lang="less" scoped>
.tooltip-content{
  display: inline-block;
  max-width: 300px;
}
  .overflow-text{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .split {
    word-break: keep-all;
  }
</style>