如何仅在容器内文本溢出截断时显示Read more按钮？基于现有代码优化

实现核心思路 #

通过对比文本元素的可视限制高度和实际内容总高度，判断是否触发了2行文本截断，仅在确认发生溢出截断时，给对应评论容器挂上标记类、控制Read more按钮的显示。 #

第一步：调整CSS规则 #

修正原有按钮默认显示的问题，补充截断场景下的按钮显隐逻辑：

.read-more{
    font-size: 12px;
    margin-top: 12px;
    cursor: pointer;
    display: none; /* 改为默认隐藏，仅检测到截断时显示 */
    text-align: left;
}
.read-less{
    font-size: 12px;
    margin-top: 12px;
    cursor: pointer;
    display: none;
    text-align: left;
}

/* 新增：仅带截断标记的容器才显示Read more */
.comment-wrapper.has-truncation .read-more {
    display: block;
}

/* 原有展开状态规则保持不变，写在截断规则后保证优先级正确，覆盖截断场景的按钮显示 */
.comment-wrapper.open .read-more {
    display: none;
}
.comment-wrapper.open .read-less {
    display: block;
}

/* 原有文本截断规则完全保留 */
.comment-wrapper .text {
    text-align: left;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.comment-wrapper.open .text {
    display: block;
}

第二步：补充JS检测逻辑 #

在原有点击切换的逻辑基础上，增加截断状态的自动检测，适配页面加载、窗口尺寸变化等场景：

// 文本截断检测函数
function checkTextTruncation() {
    // 遍历所有评论容器
    jQuery('.comment-wrapper').each(function() {
        const $wrapper = jQuery(this);
        // 跳过处于展开状态的容器，避免展开后重新计算高度导致截断标记被误删
        if ($wrapper.hasClass('open')) return;
        
        const $textEl = $wrapper.find('.text')[0];
        // 可视高度是line-clamp限制后的高度，实际内容高度取scrollHeight
        // 加1px容差，避免字体渲染的亚像素误差导致的误判
        if ($textEl.scrollHeight - $textEl.clientHeight > 1) {
            $wrapper.addClass('has-truncation');
        } else {
            $wrapper.removeClass('has-truncation');
        }
    })
}

// 页面DOM加载完成后立刻执行一次检测
jQuery(document).ready(function() {
    checkTextTruncation();
})

// 窗口尺寸变化时重新检测，适配响应式布局下的排版变化
jQuery(window).on('resize', function() {
    checkTextTruncation();
})

// 优化原有点击逻辑，去掉冗余的jQuery包裹，精准匹配父容器
jQuery(".read-more").on("click",function(){
    jQuery(this).parent('.comment-wrapper').addClass('open');
});

jQuery(".read-less").on("click",function(){
    jQuery(this).parent('.comment-wrapper').removeClass('open');
    // 收起后重新检测，保证截断状态判断准确
    checkTextTruncation();
});

实际效果 #

• 文本长度不足2行、无截断时：两个操作按钮完全隐藏，和普通短文本展示效果一致
• 文本长度超过2行、触发截断时：自动显示Read more按钮
• 点击展开后，自动隐藏Read more、显示Read less按钮
• 窗口尺寸变化导致文本排版改变（比如窄屏下原本完整的短文本被挤截断、宽屏下原本截断的长文本能完整展示），会自动重新判断状态、动态调整按钮显隐
• 完全兼容原有文本排版、展开收起的交互逻辑，无额外视觉侵入

内容的提问来源于stack exchange，提问作者pos-sudo