如何使用JavaScript实现文章段落超过两行时显示Show More按钮

实现思路 #

抛弃字数统计逻辑，改为通过元素实际渲染高度判断是否超过2行，完全适配不同字符宽度、字体、容器宽度的场景，无判断误差。核心逻辑是先让内容完整渲染，对比实际内容高度和2行文本的高度，超出则添加截断效果与Show More按钮。

完整实现代码 #

CSS 调整 #

将截断属性单独抽离为类，方便动态切换，同时补充按钮基础样式：

.info_content{
    width: 250px;
    font-size: 15px;
    letter-spacing: 0;
    line-height: 1.5;
    margin-bottom: 8px;
}
/* 截断状态的样式 */
.info_content.clamp-2 {
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 2;
}
.info-more {
    border: none;
    background: none;
    color: #1677ff;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
}

JS 代码 #

$(function(){
    // 先计算单行文本高度，乘以2得到2行的最大允许高度
    const testEle = $('<span class="info_content" style="padding:0;margin:0;border:none;visibility:hidden">测试</span>').appendTo('body');
    const lineHeight = parseFloat(getComputedStyle(testEle[0]).lineHeight);
    const twoLineHeight = lineHeight * 2;
    testEle.remove();

    $('.info_content').each(function(){ 
        const $this = $(this);
        // 对比实际内容高度和2行高度
        if($this[0].offsetHeight > twoLineHeight) {
            // 加截断类
            $this.addClass('clamp-2');
            // 追加Show More按钮
            $this.append(`<button class='info-more'>...showMore</button>`);
        } 
    });

    // 绑定按钮点击事件，支持展开/收起切换
    $(document).on('click', '.info-more', function() {
        const $content = $(this).closest('.info_content');
        if($content.hasClass('clamp-2')) {
            // 展开
            $content.removeClass('clamp-2');
            $(this).text('showLess');
        } else {
            // 收起
            $content.addClass('clamp-2');
            $(this).text('...showMore');
        }
    })
});  

HTML 结构不变 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="info_content">
     asd asdasdasd asd asda sdasd asdasd asd asdsda sdasdasda sdasd asda sdasd asd a
</h3>

 <h3 class="info_content">
asdasdasddsasfsdfsdfsdfsdf
</h3>


<!-- 第三組 -->
 <h3 class="info_content">
asdasdasdasgasdasdas   asdasda
asdasdasdasdasdasdasdasdasdd    asdasdasdasdasdasdasdasda
asdasdasdasdasdasdas     asdasdaasd     asda
</h3>

逻辑说明 #

1. 先插入一个临时测试元素拿到实际的单行行高，避免写死数值，后续修改CSS行高不需要同步改JS
2. 遍历每个内容块，先完整渲染内容，对比实际高度是否超过2行高度
3. 超出的内容块添加截断类，追加按钮，通过CSS实现省略号效果，不需要手动截断文本
4. 点击按钮切换截断类即可实现展开/收起效果，逻辑简单且性能更好

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