如何在div内文本超出1行时执行函数，实现添加Show more按钮功能

• 放弃字符长度判断逻辑，改用元素实际渲染高度作为判断是否溢出的依据，完全适配不同屏幕、不同字体、不同字符类型的场景。
• 首先明确需要限制的行数，先计算出限制行数对应的最大高度：行高 × 限制行数。
• 对比元素的scrollHeight（元素实际内容的总高度，不受overflow:hidden影响）和设置的最大高度，如果scrollHeight > 最大高度，说明内容超出限制行数，再执行截断加展开按钮的逻辑。
• 额外增加窗口resize事件监听，屏幕尺寸变化时重新判断溢出状态，避免布局错乱。

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="demo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipi</p>

CSS代码 #

.demo{
    max-width: 600px;
    border:1px solid #222;  
    line-height: 1.5; /* 明确设置行高，方便计算限制行数的总高度 */
}
/* 超出后添加的截断样式类 */
.demo.text-truncated{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 这里是你要限制的行数，要和JS里的限制行数对应 */
    -webkit-box-orient: vertical;
}
.show-more-btn{
    color: #1677ff;
    cursor: pointer;
    margin-left: 4px;
}

JS代码 #

$(function(){
    const LIMIT_LINE = 2; // 限制的行数，和CSS里-webkit-line-clamp保持一致

    // 封装判断是否溢出的方法
    function isOverflow(el){
        const $el = $(el);
        // 先移除截断类，拿到真实的内容高度
        $el.removeClass('text-truncated');
        // 计算单行高度
        const lineHeight = parseFloat($el.css('line-height'));
        // 限制行数对应的最大高度
        const maxHeight = lineHeight * LIMIT_LINE;
        // 实际内容高度大于最大高度就是溢出
        const overflow = $el[0].scrollHeight > maxHeight;
        // 溢出的话加回截断类，追加show more按钮
        if(overflow){
            $el.addClass('text-truncated');
            $el.append('<span class="show-more-btn">Show more</span>');
        }
        return overflow;
    }

    // 页面初始化时遍历所有目标元素判断
    $('.demo').each(function(){
        isOverflow(this);
    })

    // 窗口尺寸变化时重新判断，加防抖避免频繁触发
    let resizeTimer = null;
    $(window).on('resize', function(){
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function(){
            $('.demo').each(function(){
                isOverflow(this);
            })
        }, 200)
    })

    // Show more点击展开逻辑，按需调整
    $(document).on('click', '.show-more-btn', function(){
        const $parent = $(this).closest('.demo');
        $parent.removeClass('text-truncated');
        $(this).remove();
    })
});

• 必须明确设置元素的line-height属性，避免不同浏览器默认行高不一致导致计算错误。
• 如果要限制为1行，只需要把LIMIT_LINE改成1，CSS里的-webkit-line-clamp也同步改成1即可。

内容的提问来源于stack exchange，提问作者WEI A