dynamic text limiter (auto load)

limit text and print to new line dynamically by calling an element using data maxlength.

by Ashenvale Poring

HTML

<body>
    <div data-maxlength="10">法務所属長所属長所属長所所属長所属長所属長所属長所属長</div>
    <div data-maxlength="5">法務所属長所属長所属長所属長所属長所属長所属長所属長所属長所属長</div>
    <div data-maxlength="4">法務所属長所属長所属長所属長所属legal</div>
    <div data-maxlength="3">法務所属長所属長所属長所属長所属長所属長所属長所属長所属長</div>
    <div data-maxlength="5">法務所属長所長所属長</div>
    <div data-maxlength="5">法務所属長所属長所属長所属長所属長所属長所属長所属長所属長所属長</div>
    <div data-maxlength="5">法務所属長属長</div>
    <div data-maxlength="10">法務所属長所属長所属長所属長所属長所属長所属長所属長所属長所属長</div>
    <div data-maxlength="10">法務所属長所属長所所属長所属長所属長所属長</div>
</body>

CSS

div {
    margin-bottom: 30px !important;
    border: 1px solid blue;
    padding: 5px;
    width: 30%;
    height: 138px;
    overflow-y: scroll;
    display: inline-table;
}

JavaScript

$(document).ready(function () {
    var textLimitation = (function () {
        var element = {
            selector      : $('[data-maxlength]'),
            selectorCount : $('[data-maxlength]').length,
            elementText   : '',
            charCount     : 0,
            maxResult     : 0,
            splitResult   : '',

            init: function () {
                this.splitChars();
            },

            splitChars: function (data='') {
                if (this.selectorCount == 0) return;
                for (var i = 0; i < this.selectorCount; i++) {
                    this.maxResult = parseInt(this.selector.eq(i).data('maxlength'));
                    this.elementText = this.selector.eq(i).html();
                    this.elementText = this.elementText.split("");
                    this.charCount = 1;

                    for (var count = 0; count < this.elementText.length; count++) {
                        this.splitResult += this.elementText[count];

                        if (this.charCount == this.maxResult) {
                            this.splitResult += "<br />";
                            this.charCount = 0;
                        }
                        this.charCount++;
                    }

                    this.selector.eq(i).html(this.splitResult);
                    this.splitResult = '';
                }
            }
        }

        return element.init();
    })();
});