JSFiddle - React, Tailwind, and code Playground

HTML

<div class="JS_shrinkerLine">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis, risus id ultrices tincidunt, ante magna semper enim, in dictum neque elit a risus. Nulla dui nisi, venenatis nec ornare vel, aliquet et nibh. Integer id magna nisl, ut rhoncus libero. Morbi nibh leo, gravida auctor aliquet non, porttitor eu urna. Curabitur elit felis, iaculis nec consectetur ut, ultricies ut metus. Vivamus tellus dui, vulputate quis imperdiet sit amet, accumsan sed lectus. Praesent turpis urna, pharetra eget aliquet at, rutrum in orci. Quisque accumsan hendrerit vestibulum. Nulla facilisi. Mauris non blandit erat. Morbi a leo at sapien pulvinar sagittis. Quisque congue massa odio, tincidunt sodales augue. Pellentesque id sapien nulla, id auctor sem. Aenean commodo diam nec libero adipiscing nec consectetur velit blandit.
        </div>
        <br />
        <br />
        <br />
        <div class="JS_shrinkerLine">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis, risus id ultrices tincidunt, ante magna semper enim, in dictum neque elit a risus. Nulla dui nisi, venenatis nec ornare vel, aliquet et nibh. Integer id magna nisl, ut rhoncus libero. Morbi nibh leo, gravida auctor aliquet non, porttitor eu urna. Curabitur elit felis, iaculis nec consectetur ut, ultricies ut metus. Vivamus tellus dui, vulputate quis imperdiet sit amet, accumsan sed lectus. Praesent turpis urna, pharetra eget aliquet at, rutrum in orci. Quisque accumsan hendrerit vestibulum. Nulla facilisi. Mauris non blandit erat. Morbi a leo at sapien pulvinar sagittis. Quisque congue massa odio, tincidunt sodales augue. Pellentesque id sapien nulla, id auctor sem. Aenean commodo diam nec libero adipiscing nec consectetur velit blandit.
        </div>
        <br />
        <br />
        <br />
        <div class="JS_shrinkerLine">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mattis, risus id ultrices tincidunt, ante...

CSS

.bufferClass{
                 position: absolute;
                 display: block;
                 width: 100%;
                 height: 20px;

                 background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
                 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
                 background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
                 background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
                 background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
                 background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
                 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

             }

             .clickZone{
                  position: absolute;
                 bottom: -15px;
                 display: block;
                 padding: 0 7px;
                 font-weight: bold;
             }

JavaScript

/* =============================================================================
 SHRINKER OF POSTS
 ============================================================================= */

// remap jQuery to $
(function ($) {
})(window.jQuery);


(function ($) {
    jQuery.fn.extend({
        shrinker:function (options) {

            // Set the options by default or assign them if set.
            var opts = $.extend({
                "maxHeight":false, // Set to false if you want word count, else enter max height as integer
                "bufferClass":"bufferClass", // Class you want to give to the element at the end of the text but before the button
                "clickZoneClass":"clickZone", // Class you want to give to the clickable zone to show the rest of the text
                "wordLimit":20, // Word limit you want to set when
                "moreText":"» more", // Text you want to show to show more content
                "hideText":"« hide",
                "moreTextClass":"more_text",
                "moreLinkClass":"more_link"
            }, $.fn.shrinker.defaults, options);


            function _sentenceFormat(str, opts) {

                var words = str.split(' '),
                    new_sentence = '',
                    show = opts.wordLimit;

                for (var i = 0; i < words.length; i++) {
                    if (i <= show) {
                        new_sentence += words[i] + ' ';
                    } else {
                        if (i == (show + 1)) {
                            new_sentence += '... <span class="' + opts.moreTextClass + ' hide">';
                        }
                        new_sentence += words[i] + ' ';
                        if (words[i + 1] == null) {
                            new_sentence += '</span><a href="#" class="' + opts.moreLinkClass + '"> ' + opts.moreText + '</a>';
                        }
                    }
                }
                return new_sentence;
            }

        ...