JSFiddle - React, Tailwind, and code Playground

HTML

<p>Ljfasd adsfnasdf adsjf adsfjads fkads fjads fuasdn fjas dfu asdfjoa sdfo adsjof asodf oasdj foasj dfoads foas dfojas djof asdofj adsof ads f</p>
<p>Ljfasd adsfnasdf adsjf adsf jadsasdasd asd
as asd ads d
 asd asd asd a</p>
<p>Ljfasd adsfnasdf adsjf adsfjad sa sdasdsaddas asdasdasd asdasdasdasdasd sad  asdasdas ads  asd as asdas dasdad</p>
<p>Ljfasd adsfnasdf adsjf adsfjads</p>

CSS

p{
    width:300px;
}

JavaScript

$('p').filter(function(){
    return $(this).innerHeight() / $(this).css('line-height').slice(0,-2) > 2;
}).each(function(){
    var arr = [];
    while($(this).innerHeight() / $(this).css('line-height').slice(0,-2) > 2){
        arr.push($(this).text().slice(-10));
        $(this).text($(this).text().slice(0,-10));
    }
    arr.reverse();
    var morecontent = arr.join("");
    var extracontentspan = $("<span/>").text(morecontent).hide();
    var extracontentbutton = $("<a/>",{href:"#"}).text("More...").click(function(){
        $(this).prev().toggle();
        $(this).t
    });
    $(this).append(extracontentspan);
    $(this).append(extracontentbutton);
});