Html 仅当文本中断时，阅读更多按钮

我想创建一个“阅读更多”按钮，只有当包装中的文本被破坏时才会显示

这是我目前的代码：

HTML

<div class="comment-wrapper">
    <div class="text">
        Lorem ipsum. Lorem ipsum Lorem ipsum. Lorem ipsum Lorem ipsum. ipsum. Lorem ipsum
        Lorem ipsum. Lorem ipsum Lorem ipsum. Lorem ipsum Lorem ipsum. Lorem ipsum
        Lorem ipsum. Lorem ipsum.
    </div>
    <div class="read-more">Read more</div>
    <div class="read-less">Read less</div>
</div>

JS

.read-more{
    font-size: 12px;
    margin-top: 12px;
    cursor: pointer;
    display: block;
    text-align: left;
}
.read-less{
    font-size: 12px;
    margin-top: 12px;
    cursor: pointer;
    display: none;
    text-align: left;
}

.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;
}

jQuery(".read-more").on("click",function(){
    jQuery($(this)).parent('div').addClass('open');
});

jQuery(".read-less").on("click",function(){
    jQuery($(this)).parent('div').removeClass('open');
});

如何在这段代码中实现这一点

window.addEventListener('load', function() {
     var scrollHeight = document.getElementsByClassName('text')[0].scrollHeight;
     var clientHeight = document.getElementsByClassName('text')[0].clientHeight;

     if( scrollHeight > clientHeight ) {
        $('.read-more').show();
     } else {
        $('.read-more, .read-less').hide();
     }
     $(".read-more").on("click",function(){
        $('.read-more, .read-less').toggle();
    });

    $(".read-less").on("click",function(){
        $('.read-more, .read-less').toggle();
    });
});

---

}))

首先，谢谢你的回答！！我在代码中实现了它，但不幸的是现在我看不到任何按钮？你应该设置。无读显示：无；当窗口加载且文本是隐藏的小按钮时，当文本大按钮显示时如果文本大按钮显示，单击按钮后读取较少和读取较多将更改您的代码，不需要addClass和removeClass对不起，您应该设置。读取较多显示：无；它将显示文本是否会变大。这是否回答了您的问题？谢谢这对我来说是一个有效的解决方案！！祝您有个美好的一天！

window.addEventListener('load', function() {
$('.comment-wrapper').each(function() {
    var scrollHeight = this.getElementsByClassName('text')[0].scrollHeight;
    var clientHeight = this.getElementsByClassName('text')[0].clientHeight;
    var thisElem = this;
    if( scrollHeight > clientHeight ) {
       $(this).children('.read-more').show();
    } else {
       $(thisElem).find('.read-more, .read-less').hide();
    }
    $(this).children(".read-more").on("click", function() {
        console.log('done');
       $(thisElem).find('.read-more, .read-less').toggle();
    });

    $(this).children(".read-less").on("click", function() {
        $(thisElem).find('.read-more, .read-less').toggle();
    });
});