JSFiddle - React, Tailwind, and code Playground

HTML

<div class="comments">
    <div class="comment">ПЕрывй</div>
    <div class="comment">второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй второй</div>
    <div class="comment">третий третий третий третий третий третий третий третий третий третий третий трети 123123123</div>
</div>

CSS

.comments {
    width:200px;
    border: 1px solid blue;
}
.comment {
    display: block;
    position: relative;
    border: 1px solid green;
    line-height: 18px;
    max-height:54px;
    /*x3 line-height для отображения 3-х строк*/
    overflow:hidden;
    /*скрывает все что нне влезло*/
}
.showFull {
    position:absolute;
    top: 37px;
    right: 0px;
    color: blue;
    background: grey;
}

JavaScript

$(function () {
    $('.comment').each(function () { //для каждого с классом "comment"
        if ($(this).prop('scrollHeight') > 54) { //Проверяем реальную высоту, и если она больше 54
            $(this).append('<span class="showFull">Весь</span>'); //рисуем кнопку для отображения всего комментария
        }

    });

    $('.comment .showFull').on('click', function () { //При клике на "Весь"
        $(this).hide().parents('div.comment').css('max-height', 'none'); //Отменяем максимальную высоту для комментария

    });
});