javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript多行文本溢出

JavaScript实现多行文本溢出

作者：Jxiang

这篇文章主要为大家详细介绍了如何使用JavaScript实现多行文本溢出省略号的样式,文中的示例代码讲解详细,有需要的小伙伴可以参考一下

背景：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>

到此这篇关于JavaScript实现多行文本溢出的文章就介绍到这了,更多相关JavaScript多行文本溢出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文