JavaScript实现多行文本溢出

<template>
<div class="name-wrap">
    <span class="tag bd">
         我是标签
    </span>hhhhhhhhhhhhhhhhhhhh
</div>
</template>
<style>
.tag {
    dispaly: inline-block;
}
.name-wrap {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>

<div class="name-wrap">
    <span class="tag bd">
         我是标签
    </span>
    <span class="text-ellipsis" :ref="setItemRef">hhhhhhhhhhhhhhhhhhhh</span>    
</div>
<script lang="ts">
export default defineComponent({
    props: {
        show: Boolean,
    },
    setup(props, ctx) {
        let showPopup = computed({
            get: () => props.show,
            set: (val: boolean) => ctx.emit("update:show", val),
        });

        const textElements = ref<HTMLElement[]>([]);
        const setItemRef = (el: any) => {
            if (el) {
                textElements.value.push(el);
            }
        };

        const applyEllipsis = (element: HTMLElement, maxLines: number) => {
            let text = element.innerHTML;
            const lineHeight = parseInt(window.getComputedStyle(element).lineHeight);
            const maxHeight = lineHeight * maxLines;

            // 不断减少文本直到其高度小于或等于最大允许高度
            while (element.scrollHeight > maxHeight) {
                text = text.slice(0, -1);
                element.innerHTML = text + '...';
            }
        }

        watch(() => showPopup.value, (val: boolean) => {
            if (val) {
                requestAnimationFrame(async () => {
                    await nextTick(); // 确保 DOM 已更新
                    textElements.value.forEach((element) => {
                        applyEllipsis(element, 2);
                    });
                });
            }
        })


        return {
            showPopup,
            setItemRef,
        }
    },
});
</script>
<style>
.name-wrap {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #101112;
    line-height: 20px;
    flex: 1;
}
.tag {
    float: left;
}
.text-ellipsis {
    display: block;
    word-break: break-all;
}
</style>