仅当文本中断时“阅读更多”按钮

Question

我想要实现的是创建一个read more按钮，它只会在包装器中的文本中断时显示。

这是我到目前为止的代码：

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>

CSS

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

JS

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

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

有没有人建议一下如何在这段代码中实现这一点？

先进的谢谢！

Answer 1

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();
});

}）；