JSFiddle - React, Tailwind, and code Playground

HTML

<p id="shrinkMe" class="shrinkable">Sample Text Sample Text Sample Text Sample Text Sample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample Text</p>

<p id="shrinkMe2" class="shrinkable">Sample Text Sample Text Sample Text Sample Text Sample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample Text</p>

<p id="shrinkMe3" class="shrinkable">Sample Text Sample Text Sample Text Sample Text Sample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample TextSample Text Sample Text</p>

CSS

.hidden {
    display: none;
}

JavaScript

function showMore(id){
    document.getElementById(id+'Overflow').className='';
    document.getElementById(id+'MoreLink').className='hidden';
    document.getElementById(id+'LessLink').className='';
}

function showLess(id){
    document.getElementById(id+'Overflow').className='hidden';
    document.getElementById(id+'MoreLink').className='';
    document.getElementById(id+'LessLink').className='hidden';
}

var len = 100;
var shrinkables = document.getElementsByClassName('shrinkable');
if (shrinkables.length > 0) {
    for (var i = 0; i < shrinkables.length; i++){
        var fullText = shrinkables[i].innerHTML;
        if(fullText.length > len){
            var trunc = fullText.substring(0, len).replace(/\w+$/, '');
            var remainder = "";
            var id = shrinkables[i].id;
            remainder = fullText.substring(len, fullText.length);
            shrinkables[i].innerHTML = '<span>' + trunc + '<span class="hidden" id="' + id + 'Overflow">'+ remainder +'</span></span>&nbsp;<a id="' + id + 'MoreLink" href="#!" onclick="showMore(\''+ id + '\');">More</a><a class="hidden" href="#!" id="' + id + 'LessLink" onclick="showLess(\''+ id + '\');">Less</a>';
        }
    }
}