JSFiddle - React, Tailwind, and code Playground

by TekVanDo

HTML

<div id="sss1" class="test">asdadadasdadasdasd</div>
<div id="sss2" class="test">asdadadasdadasdasd</div>
<div id="sss3" class="test">asdadadasdadasdasd</div>
<div id="sss4" class="test">asdadadasdadasdasd</div>
<div id="sss5" class="test">asdadadasdadasdasd</div>
<div class="test123">asdadadasdadasdasd</div>
<div class="test123">asdadadasdadasdasd</div>
<div class="test123">asdadadasdadasdasd</div>
<div class="test123">asdadadasdadasdasd</div>
<div class="test123">asdadadasdadasdasd</div>

JavaScript

// создаём плагин maxlength
jQuery.fn.maxlength = function (options) {
    // определяем параметры по умолчанию и прописываем указанные при обращении
    var settings = jQuery.extend({
        maxChars: 10, // максимальное колличество символов
    }, options);
    // выполняем плагин для каждого объекта
    return this.each(function () {
        // определяем объект
        var $me = $(this);
        // определяем динамическую переменную колличества оставшихся для ввода символов
        var l = settings.maxChars;
        // определяем события на которые нужно реагировать
        var text = $me.text();
        var meL = text.length;
        if (meL >= l) {
            $me.text(text.substr(0,l) + '…');
        }
    });
};


$("#sss1").maxlength({"maxChars":3});
$("#sss2").maxlength({"maxChars":4});
$("#sss3").maxlength({"maxChars":5});
$("#sss4").maxlength({"maxChars":6});
$("#sss5").maxlength({"maxChars":7});
$(".test123").maxlength({"maxChars":3});