JSFiddle - React, Tailwind, and code Playground

by houmie

HTML

<p>Made some progress with the deal. Trying to convince Silvia of the lunch deal quality. Deal still in progress...</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);
});