div内容过长自动省略号(未测试)

最新推荐文章于 2024-07-10 16:10:21 发布

程序员_007

最新推荐文章于 2024-07-10 16:10:21 发布

阅读量458

点赞数

分类专栏：实用代码块

实用代码块专栏收录该内容

231 篇文章

订阅专栏

本文介绍了一种通过JavaScript自动计算并调整HTML元素中显示文本长度的方法，确保文本不会超出指定宽度，同时保持内容完整性和阅读体验。

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

<div class="tits" style="width:900px;">${item.note}</div>
 
    //自动计算长度，并剔除html元素
    $(".tits").each(function(i) {
        var leg = 280;
        $(this).html($(this).text());
            var copyThis = $(this.cloneNode(true)).hide().css({
                'position': 'absolute',
                'width': 'auto',
                'overflow': 'visible'
            }); 
            $(this).after(copyThis);
            if(copyThis.width()>$(this).width()){
                $(this).html($(this).text().substring(0,leg)+'...');
                copyThis.remove();
            }else{
                copyThis.remove(); //清除复制
                return;
            }
    });