JSFiddle - React, Tailwind, and code Playground

by andsemin

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;
    bottom: 0px;
    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 () { //При клике на "Весь"
        
        if ($(this).hasClass('canHide')){ //Проверяем, надо ли раздвигать или сужать
            $(this)
            .removeClass('canHide')
            .text('Весь') //Меняем текст
            .parents('div.comment') //Выбираем родителя
            .css('max-height', $(this).attr('data-h')); //Задаем максимальную высоту для комментария
        }else{
            var maxH = $(this).parents('div.comment').css('max-height'); //текущая высота комментария
            $(this)
            .attr('data-h', maxH) //Устнавливаем, чтобы потом выставить
            .text('Скрыть') //Меняем текст
            .addClass('canHide') //Класс
            .parents('div.comment') //Выбираем родителя
            .css('max-height', 'none'); //Отменяем максимальную высоту для комментария
        }
        
    });
});