JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo foo 
</div>
<br><br>
<div class="box">
bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar 
bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar 
bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar 
bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar 
bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar 
bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar 
bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar bar 
</div>

JavaScript

$('document').ready(function () {
    truncate('.box');
    $('.readMore').live('click', function () {
        var $hidden = $('.hiddenText');
        if ($hidden.is(':hidden')) {
            $hidden.show();
            $(this).hide()
        } else {
            $(this).appendTo($('.revealText')).children('.readMoreText').text('more').siblings().show();
            $hidden.hide()
        }
    });
    $('.readMore').click();
    function truncate(element) {
        $(element + ' p').css({
            display: 'inline'
        });
        var theText = $(element).html();
        var item;
        var convertedText = '<span class="revealText">';
        var limit = 100;
        var counter = 0;
        var lastTag;
        var lastOpenTags = [];
        var nowHiding = false;
        theText = theText.replace(/[\s\n\r]{2,}/g, ' ');
        theText = theText.replace(/(<[^<>]+>)/g, '|*|SPLITTER|*|$1|*|SPLITTER|*|');
        theText = theText.replace(/(\|\*\|SPLITTER\|\*\|)(\s*)\|\*\|SPLITTER\|\*\|/g, '$1$2');
        theText = theText.replace(/^[\s\t\r]*\|\*\|SPLITTER\|\*\||\|\*\|SPLITTER\|\*\|[\s\t\r]*$/g, '');
        theText = theText.split(/\|\*\|SPLITTER\|\*\|/);
        for (var i in theText) {
            item = theText[i];
            lastTag = lastOpenTags[lastOpenTags.length - 1];
            if (!item.match(/<[^<>]+>/)) {
                if (lastTag && item.charAt(0) == ' ' && !lastTag[1].match(/span|SPAN/)) item = item.substr(1);
                if (!nowHiding) {
                    counter += item.length;
                    if (counter >= limit) {
                        var length = item.length - 1;
                        var position = (length) - (counter - limit);
                        while (position != length) {
                            if ( !! item.charAt(position).match(/[\s\t\n]/) || position == length) break;
                            else position++
                        }
                        if (position != length) position--;
...