记录一次JS 实现多行文本溢出

用户6256742

发布于 2024-05-17 09:22:58

920

发布于 2024-05-17 09:22:58

文章被收录于专栏：网络日志网络日志

背景：UED给的设计稿要求。需要实现多行文本溢出省略号的样式。

原以为是一个简单的小需求, 框框直接上手。代码如下

<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>

一切看起来都是嘎嘎完美，虽然我知道这么写是有兼容问题的，但这个不是我这次关注的点。重点在于，我还有一个标签，在大部分手机下都能实现我想要的样式。但是在高版本的ios(iphone14、iphone15)下，他会默认成单行文本溢出省略号 。我了解到原因是-webkit-line-clamp属性的工作原则需要其容器是块级元素或至少表现得像一个块级元素。 所以我猜测，有没有可能在高版本的ios中，这个属性实现方式有所调整😂。
由于我需要的样式是类似文字环绕的效果，所以我无法直接给标签外的文字添加一个span标签来改变html结构。需要加上浮动效果才行。

总结就是我太菜了，所以我改用了一种比较原始的方法。用js去实现多行文本溢出省略+浮动去实现我想要的效果. 因此记录一下

<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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-04-05 ，如有侵权请联系 cloudcommunity@tencent.com 删除

容器