JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="summary">
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
        </p>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
        </p>
       
    </div>
    <div class="ellipsis"><span>... Read more</span></div>
</div>

CSS

body {
    font: 13px sans-serif;
    padding: 20px;
}
.container {
    width: 600px;
    border: 1px solid #888;
    padding: 0.5em;
    line-height: 1.2em;
    margin-bottom: 10px;
}
.summary {
    height: 47px; /* adjust based on line-height * rows desired */
    overflow: hidden;
}
.ellipsis {
    height: 0;
    
}
.ellipsis span {
    background: white;
    padding-left: 0.5em;
    position: relative;
    top: -1.2em;
    left: 3.2em;
    color: blue;
}

JavaScript

$(".summary").each(function () {
    $(this).next().toggle(this.scrollHeight > this.offsetHeight);
});