TextShortener

index.html

<div class="text-box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid reiciendis earum impedit unde corporis, deserunt debitis velit, tenetur incidunt perferendis necessitatibus ullam eligendi aspernatur nam cupiditate at, ipsum, dolorem rerum!
</div>

script.js

//text shortener
(function ($) {
    $.fn.shorten = function (settings) {
        var config = {
            showChars: 150,
            ellipsesText: "...",
            moreText: "More",
            lessText: "Less "
        };

        if (settings) {
            $.extend(config, settings);
        }

        $(document).off("click", '.morelink');
        $(document).on({
            click: function () {
                var $this = $(this);
                if ($this.hasClass('less')) {
                    $this.removeClass('less');
                    $this.html(config.moreText);
                } else {
                    $this.addClass('less');
                    $this.html(config.lessText);
                }
                $this.parent().prev().toggle();
                $this.prev().toggle();
                return false;
            }
        }, '.morelink');

        return this.each(function () {
            var $this = $(this);
            if ($this.hasClass("shortened")) return;

            $this.addClass("shortened");
            var content = $this.html();
            if (content.length > config.showChars) {
                var c = content.substr(0, config.showChars);
                var h = content.substr(config.showChars, content.length - config.showChars);
                var html = c + '<span class="moreellipses">' + config.ellipsesText + ' </span><span class="morecontent"><span>' + h + '</span> <a href="#" class="morelink">' + config.moreText + '</a></span>';
                $this.html(html);
                $(".morecontent span").hide();
            }
        });

    };

	
	$(".text-box").shorten();
})(jQuery);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

.text-box{height:80px; width:200px;}

textshortener.markdown

TextShortener

A Pen by betul on CodePen.

License.