JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dotdotdot.frebsite.nl/js/jquery.dotdotdot-1.2.1.js"></script>
<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae tellus eu dui placerat interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Vestibulum id diam eu tellus lacinia sagittis sed ut ipsum. Pellentesque vestibulum ornare tellus, ut pellentesque lorem accumsan id. Quisque imperdiet interdum nunc ac pulvinar. Praesent elementum diam quis magna ultrices volutpat. Pellentesque eu nibh nec ipsum laoreet consequat. Quisque at suscipit velit. Vestibulum in mauris magna, ut feugiat arcu.<a class="read-more" href="#">more</a></p>

<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae tellus eu dui placerat interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a class="read-more" href="#">more</a></p>

<p class="truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae tellus eu dui placerat interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae tellus eu dui placerat interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a class="read-more" href="#">more</a></p>

CSS

.truncate {
    font-size:15px;
    line-height:22px;
    margin-bottom:40px;
}

JavaScript

$(document).ready(function(){
   
    $('.truncate').dotdotdot({
        ellipsis     : '… ',
        watch        : true,
        wrap         : 'letter',
        height       : parseInt( $('.truncate').css('line-height'), 10) * 2, // this is the number of lines
        lastCharacter: {
            remove: [ ' ', ',', ';', '.', '!', '?' ],
            noEllipsis: []
        },
        after: "a.read-more"
    });
    
    $('a.read-more').on( 'click', function(event) {
        event.preventDefault();
        $(this).parent().trigger("destroy");
    });
    
    
});