快捷導(dǎo)航

JavaScript實(shí)現(xiàn)多行文本溢出

更新時(shí)間：2024年03月27日 09:18:55 作者：Jxiang

這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)多行文本溢出省略號(hào)的樣式,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下

背景：UED給的設(shè)計(jì)稿要求。需要實(shí)現(xiàn)多行文本溢出省略號(hào)的樣式。

原以為是一個(gè)簡單的小需求, 框框直接上手。代碼如下

<template>
<div class="name-wrap">
    <span class="tag bd">
         我是標(biāo)簽
    </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>

一切看起來都是嘎嘎完美，雖然我知道這么寫是有兼容問題的，但這個(gè)不是我這次關(guān)注的點(diǎn)。重點(diǎn)在于，我還有一個(gè)標(biāo)簽，在大部分手機(jī)下都能實(shí)現(xiàn)我想要的樣式。但是在高版本的ios(iphone14、iphone15)下，他會(huì)默認(rèn)成單行文本溢出省略號(hào) 。我了解到原因是-webkit-line-clamp屬性的工作原則需要其容器是塊級(jí)元素或至少表現(xiàn)得像一個(gè)塊級(jí)元素。 所以我猜測，有沒有可能在高版本的ios中，這個(gè)屬性實(shí)現(xiàn)方式有所調(diào)整。

由于我需要的樣式是類似文字環(huán)繞的效果，所以我無法直接給標(biāo)簽外的文字添加一個(gè)span標(biāo)簽來改變html結(jié)構(gòu)。需要加上浮動(dòng)效果才行。

總結(jié)就是我太菜了，所以我改用了一種比較原始的方法。用js去實(shí)現(xiàn)多行文本溢出省略+浮動(dòng)去實(shí)現(xiàn)我想要的效果. 因此記錄一下

<div class="name-wrap">
    <span class="tag bd">
         我是標(biāo)簽
    </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>

到此這篇關(guān)于JavaScript實(shí)現(xiàn)多行文本溢出的文章就介紹到這了,更多相關(guān)JavaScript多行文本溢出內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: