Cắt ngắn nội dung text bằng JS

Showless, Showmore nội dung text, khi nội dung quá dài và mình muốn hiển thị cắt bớt nó đi và thêm các nút hiển thị thêm, hiển thị bớt.

Viết function js

$.fn.shortedContent = function (settings) {

    var config = {
        showChars: 60,
        showLines: 3,
        ellipsesText: "...",
        moreText: (typeof textShowMore == 'undefined') ? 'show more' : textShowMore,
        lessText: (typeof textShowLess == 'undefined') ? 'show less' : textShowLess,
    };

    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();
        var moreContent = '';
        var arrLine = content.split("\n");
        var c = content, h = '';
        var hasMore = false;

        if (arrLine.length > config.showLines) {
            hasMore = true;
            content = arrLine.splice(0, config.showLines).join("\n");
            moreContent = arrLine.join("\n");
        }

        if (content.length > config.showChars) {
            hasMore = true;
            c = content.substr(0, config.showChars);
            h = content.substr(config.showChars, content.length - config.showChars)
                    + moreContent;
        } else {
            c = content;
            h = moreContent;
        }

        if (hasMore) {
            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();
        }
    });

};


Cách dùng:


$('.element').shortedContent({
    showChars: 100, //cắt ngắn còn 100 ký tự
    showLines: 3, // cắt ngắn còn 3 dòng, nếu có nhiều xuống dòng
    ellipsesText: "...",
    moreText: 'showmore',
    lessText: 'showless',
});

 

Kết quả:

Showless, Showmore nội dung text, khi nội dung quá dài và mình muốn hiển thị cắt gọn nó đi và thêm các nút hiển thị thêm, hiển thị bớt.

 

Bài viết từ pinlaz.com