❧ Tooltip组件省略显示组件封装

<template>
    <el-tooltip placement="top" v-if="content">
        <template #content>
            <div class="tooltip-container" v-html="content"></div>
        </template>
        <div class="shenglue" :style="{'-webkit-line-clamp': ellipsis}" v-html="content"></div>
    </el-tooltip>
</template>

<script setup lang="ts">
defineProps({
    content: String,
    placement: {
        type: String,
        default: 'top'
    },
    // 几行省略
    ellipsis: {
        type: Number,
        default: 3
    }
})
</script>

<style scoped lang="less">
.shenglue {
  word-break: break-all !important;
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  // word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word !important;
}

// tooltip组件的悬浮div大小限制
.tooltip-container {
  max-width: 500px;
  max-height: 500px;
  overflow-y: auto;
}
</style>