JSFiddle - React, Tailwind, and code Playground

by this_mong

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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;
}

JavaScript

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