JSFiddle - React, Tailwind, and code Playground

HTML

<p class="texto">
    Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.
</p>

CSS

.texto{
    border: 1px solid red;
    overflow: auto;
    line-height: 20px;
    height: 60px;
    position: relative
}
.texto:after{
    content: "...";
    color: red;
    position: absolute;
    bottom: 0;
    right: 10px;
    background: #fff;
}
.texto:hover:after{
    display: none;
}

JavaScript

var $texto = $('.texto')
$texto
    .wrapInner('<span class="txt-container" />')
    .hover(
        function(){
            $texto.animate({height: $texto.find('.txt-container').height()})
        },
        function(){
            $texto.animate({ height: 60 })
        }
    );