JSFiddle - React, Tailwind, and code Playground

by Dmitry Nazarov

HTML

<div style="text-align:left; overflow:hidden;">   
    <div style="width:45%; float:left;">
        <h3 align="left">Пример №1</h3>
<pre>
$('.pr1').liTextLength({
    length: 150,                                    
    afterLength: '...',                                    
    fullText:false
});
</pre>
        <p class="pr1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        </p>
    </div>
    
    <div style="width:45%; float:left; margin:0 0 0 5%">
        <h3 align="left">Пример №2</h3>
<pre>
$('.pr2').liTextLength({
    length: 150,
    afterLength: '...',
    fullText:true,
    moreText: '&lt;br&gt;полный&nbsp;текст',
    lessText: '&lt;br&gt;скрыть&nbsp;полный&nbsp;текст'
});
</pre>
        <p class="pr2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim venia quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        </p>
    </div>
</div>

CSS

body {
    color: #999;
    font: 12px/1.2em Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0 10px;
    text-align: left;
}
.header {
    background: #ccc;
    margin: 0 0 20px 0;
    padding: 10px;
    text-align: center;
}
pre {
    border: 1px dashed #ccc;
    padding: 10px;
    text-align: left;
}
.more {
    border-bottom: 1px dashed #6DA3BD;
    color: #6DA3BD;
    cursor: pointer;
    display: inline;
}
.more:hover {
    border-color: #4D7285;
    color: #4D7285;
}

JavaScript

$(document).ready(function(){
   //плагин
    jQuery.fn.liTextLength = function(options){
    // настройки по умолчанию
    var o = jQuery.extend({
        length: 150,                                    //Видимое кол-во символов
        afterLength: '...',                                //Текст после видимого содержания        
        fullText:true,                                    //Добавить ссылку для отображения скрытого текста
        moreText: '<br>полный&nbsp;текст',                //Текст ссылки до показа скрытого содержания
        lessText: '<br>скрыть&nbsp;полный&nbsp;текст'    //Текст ссылки после показа скрытого содержания
    },options);
    return this.each(function(){
        var 
        $el = $(this),
        elText = $.trim($el.text()),
        elLength = elText.length;
        if(elLength > o.length){ 
            var 
            textSlice = $.trim(elText.substr(0,o.length)),
            textSliced = $.trim(elText.substr(o.length));
            if(textSlice.length < o.length){
                var 
                textVisible = textSlice,
                textHidden = $.trim(elText.substr(o.length));
            }else{    
                var 
                arrSlice = textSlice.split(' '),
                popped = arrSlice.pop(),
                textVisible = arrSlice.join(' ') + ' ',
                textHidden = popped + textSliced  + ' ';
            };
            var 
            $elTextHidden = $('<span>').addClass('elTextHidden').html(textHidden),
            $afterLength = $('<span>').addClass('afterLength').html(o.afterLength + ' '),
            $more = $('<span>').addClass('more').html(o.moreText);
            $el.text(textVisible).append($afterLength).append($elTextHidden);
            var displayStyle = $elTextHidden.css('display');
            $elTextHidden.hide();
            if(o.fullText){
                $el.append($more);
                $more.click(function(){
                    if($elTextHidden.is(':hidden')){
         ...