文字超长，实现展开收起功能...

最新推荐文章于 2025-06-16 09:58:15 发布

程序me

最新推荐文章于 2025-06-16 09:58:15 发布

阅读量1.5w

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： getClientRects 展开收起 ...

本文链接：https://blog.csdn.net/lqyygyss/article/details/81868679

js 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种实现文本自动截断并保留展开功能的方法。通过计算屏幕可显示宽度和字符数量，确保文本适配不同设备。使用getClientRects进行逐字符减少，精确控制文本显示行数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于超长文字，有时需要实现...功能。如果...不需要获取事件，直接用css3来实现：

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical

如果需要获取事件，点击还能展开，怎么处理呢？

1、计算屏幕可现实宽度，然后看一行可以显示多少个字符，然后截取显示。

这个就有点复杂了，需要考虑的点很多：

a)中文，英文字符，

b)换行符

c)自定义表情（如果有<img实现的）。

d)每一行最后位置不够后面一个完整字符显示，可能下一个字符是中文，可能下一个字符是英文。

2、使用getClientRects来精确做到。一个一个字符的减少，然后获取当前有多少行，当达到所需要的行数，则OK了，把减少的隐藏。

fn.handleTxt = function() {
        var self = this;
        var dom = document.querySelectorAll(".item[data-id]");
        function removeA(index) {
            dom[index].removeAttribute("data-id");
        }
        for(var i=0,len=dom.length;i<len;i++){
            var shareid = dom[i].dataset.shareid;
            if(typeof shareid=="undefined") continue;
            var obj={};
            for(var j=self.feedObj.openText,len2=self.feedObj.feedlist.length;j<len2;j++){
                if(self.feedObj.feedlist[j].shareid==shareid){
                    obj = self.feedObj.feedlist[j];
                    break;
                }
            }
            if(!obj.showTxt){
                removeA(i);
                continue;
            }
            var rect = dom[i].getClientRects();
            var h = getLength(rect);
            if(h<3){
                removeA(i);
                continue;
            }
            var tl=0,t = obj.showTxt;
            dom[i].querySelectorAll(".dot").forEach(function (el) {
                el.style.display="inline-block";//把点点和展开放开，为后面计算更真实
            });
            var showtxt = dom[i].querySelector(".showtxt");
            while(h>3){
                var step=1;
                if(/<br\/>$/.test(t)){
                    step = 5;
                }else{
                    var reg = t.match(/<img[^>]*>$/);//如果是<img xxxxxx > 则需要整体前移，否则会折断
                    if(reg&&reg[0]) step = reg[0].length;
                }
                t = t.slice(0,-step);
                showtxt.innerHTML = t;
                h = getLength(dom[i].getClientRects());
                tl+=step;
            }
            obj.hideTxt =obj.showTxt.slice(obj.showTxt.length-tl);
            if(obj.hideTxt){
                var height=dom[i].querySelector(".item_more").offsetWidth;
                obj.hideTxt+=(rect[rect.length-1].width>(dom[i].offsetWidth-height)?'<span style="display:inline-block;width:'+height+'px"></span>':'');//页面收起和正文重叠
            }else{
                dom[i].querySelectorAll(".dot").forEach(function (el) {
                    el.style.display="none";//把点点和展开放开，为后面计算更真实
                });
            }
            obj.showTxt = t;
            obj.txtDone = 1;
            removeA(i);
        }
        self.feedObj.openText = self.feedObj.feedlist.length;
    }
    function getLength(list){
        var l = 0, lastBottom;
        for(var i=0,len=list.length;i<len;i++){
            if(list[i].bottom == lastBottom){
                return;
            }
            lastBottom = list[i].bottom;
            l++;
        }
        return l;
    }

效果图：

<span class="desc">
    <span class="showTxt">
        天的阳光真的超级好 很适合出门拍照，但你有没有厌倦自己总是很学生气的打扮？
    </span>
    <span class="dot" style="">...</span>
    <span class="hideTxt">觉得山顶的风景实在是有够浪漫</span>
    <span class="more dot" style="">展开</span>
</span>