JSFiddle - React, Tailwind, and code Playground

by Dmitry Nazarov

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Скрипт скрытого текста</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family:'Roboto Condensed'; background-color:#ccc;}
h1,h2 {margin-top:40px; text-align:center;}
.demo {margin:30px auto; max-width:400px; padding:2em; box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); background-color:#fafafa;}
.demo a {padding:10px 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); background-color:#2196F3; border-radius:3px; color:#fff; text-decoration:none;}
p{text-align:center;}
.demo p{text-align:left;}
</style>
</head>

<body>

<h2>Первый пример скрытого текста</h2>
<div class="demo">
<p>In sit amet egestas orci. Vestibulum congue volutpat enim ut viverra. Ut id maximus tellus, vel sollicitudin augue. Vivamus efficitur, tellus vitae vehicula ornare, sapien dui dapibus mauris, id egestas nisl lectus rutrum urna. Suspendisse auctor elit id ipsum mattis, non consectetur neque auctor. Proin et erat at metus bibendum hendrerit gravida ut lorem. Morbi eget enim quis ex mattis maximus faucibus nec tortor. Curabitur id justo justo.</p>
<a href="">Читать далее</a>
</div>

<h2>Второй пример скрытого текста</h2>
<div class="demo">
<p>In sit amet egestas orci. Vestibulum congue volutpat enim ut viverra. Ut id maximus tellus, vel sollicitudin augue. Vivamus efficitur, tellus vitae vehicula ornare, sapien dui dapibus mauris, id egestas nisl lectus rutrum urna. Suspendisse auctor elit id ipsum mattis, non consectetur neque auctor. Proin et erat at metus bibendum hendrerit gravida ut lorem. Morbi eget enim quis ex mattis maximus faucibus nec tortor. Curabitur id justo justo.</p>
<a href="#">Читать далее</a>
</div>

<p>Скрипт был предоставлен сайтом <a href="http://age-dragon.com/scripts/22-skrytyi-tekst.html">http://Age-Dragon.com</a></p>
<script...

CSS

body {font-family:'Roboto Condensed'; background-color:#ccc;}
h1,h2 {margin-top:40px; text-align:center;}
.demo {margin:30px auto; max-width:400px; padding:2em; box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22); background-color:#fafafa;}
.demo a {padding:10px 20px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); background-color:#2196F3; border-radius:3px; color:#fff; text-decoration:none;}
p{text-align:center;}
.demo p{text-align:left;}

JavaScript

(function ($) {
    'use strict';
    $.fn.curtail = function (options) {
        var settings = $.extend({
            limit: 250,
            ellipsis: '...',
            toggle: false,
            text: ['закрыть', 'читать далее']
        }, options);
        $(this).each(function () {
            var $this = $(this),
                p = $this.find('> p'),
                a = $this.find('> a');

            if (p.text().length > settings.limit) {
                init(p, a);
            } else {
                a.hide();
            }
        });
        function init(p, a) {
            a[0].text = settings.text[1];
            var oldParagraphs = nowParagraphs(p),
                newParagraphs = nextParagraphs(p),
                flag = true;            
            setParagraphs(p, newParagraphs);            
            a.on('click', function (e) {
                if (settings.toggle) {
                    if (flag) {
                        setParagraphs(p, oldParagraphs);
                        this.text = settings.text[0];
                    } else {
                        setParagraphs(p, newParagraphs);
                        this.text = settings.text[1];
                    }
                    flag = !flag;
                } else {
                    setParagraphs(p, oldParagraphs);
                    a.hide();
                }
                e.preventDefault();
            });
        }
        function nowParagraphs(paragraphs) {
            var strArr = [];
            for (var i = 0; i < paragraphs.length; i++) {
                strArr.push(paragraphs[i].innerHTML);
            }
            return strArr;
        }
        function nextParagraphs(paragraphs) {
            var strArr = [],
                chars = 0,
                truncate = 0;
            paragraphs.each(function () {
                var str = $(this).html(),
                    len = str.length;
                chars += len;
                if (chars <=...