JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

<p class="trunc">This text just happens to be more than seven words.</p>
<p class="trunc">Short text.</p>

JavaScript

(function($) {
    $.fn.trunc = function(numWords) {
        this.each(function() {
            var me = $(this);
            var original = me.text();
            var truncated = original.split(" ");

            if (truncated.length <= numWords) {
                return;
            }
            while (truncated.length > numWords) {
                truncated.pop();
            }
            truncated = truncated.join(" ");
            collapse();

            function expand() {
                me.text(original);
                var link = $('<a href="#">see less</a>');
                link.click(collapse);
                me.append(' [').append(link).append(']');
                return false;
            }

            function collapse() {
                me.text(truncated + "... ");
                var link = $('<a href="#">see more</a>');
                link.click(expand);
                me.append(' [').append(link).append(']');
                return false;
            }
        });
    };
})(jQuery);

$(".trunc").trunc(7);