vue3-溢出多行中间省略号

<template>
  <div class="singleBox" :class="className">{{curtStr}}</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'singleLine' })
import { ref, onMounted,onUnmounted , reactive } from 'vue'
const props = defineProps({
    str:{
        type: String,
        default:''
    },
    className:{
        type: String,
        default:''
    },
    lineNum:{
        type: Number,
        default: 2
    }
});
const defaultStr = props.str,refName = props.className
let maxLine = props.lineNum || 2
let curtStr = ref(props.str)
const setText=()=>{
    if(!refName) return
    let textContainers = document.getElementsByClassName(refName) ;
    if(!textContainers.length) return
    let newDom =  textContainers[0] as HTMLElement
    newDom.innerHTML = defaultStr
    const maxHeight = parseInt(window.getComputedStyle(newDom).lineHeight)* maxLine;
    if (newDom.offsetHeight > maxHeight) {
        let startIndex = 5
        let endStr = defaultStr.substring(defaultStr.length - 7)
        newDom.innerHTML = defaultStr.substring(0,startIndex)+'...'+ endStr
        while(newDom.offsetHeight <= maxHeight){
            startIndex= startIndex+1
            newDom.innerHTML = defaultStr.substring(0,startIndex)+'...'+ endStr
        }
        if(newDom.offsetHeight > maxHeight){
            startIndex= startIndex-1
            newDom.innerHTML = defaultStr.substring(0,startIndex)+'...'+ endStr
        }
    }
}
onMounted(() => {
    setText()
    window.addEventListener('resize', setText);
})
onUnmounted(() => {
  window.removeEventListener('resize', setText);
});
</script>

<style lang="scss" scoped>
.singleBox{
    width: 100%;
    overflow: unset; 
    text-overflow: unset; 
    white-space: unset;
}
</style>