JSFiddle - React, Tailwind, and code Playground

by Matthew Day

HTML

<div>Marketing teams input produce cross purposing in view of goal alignments due to knowledge paucity, necessitating workflow education and orientation. Media sourcing as an acquisition strategy is counterproductive in a internet environment in virtual component methodology. Imaging through ideals rather than real world branding, is a perilous undertaking with negative results. Branding strategies generating motion as activity without reproducible results is a ultimately futile effort if left in place.</div>

CSS

.indent {
    margin-left: 20px;
    margin-right: 20px;
    text-align: center;
}

JavaScript

$(function() {
    indent($("div")[0]);
});

function indent(div) {
    if (document.createRange) {
        var rng = document.createRange();
        rng.selectNodeContents(div);
        var len = rng.toString().length;
        var start = rng.toString().search(/.\s/);
        if (start < 0) return;
        var txt = div.childNodes[0];
        rng.setEnd(txt, start);
        var startRect = rng.getBoundingClientRect();
        var rect;
        for (var i = start + 1; i < len; i++) {
            rng.setEnd(txt, i);
            rect = rng.getBoundingClientRect();
            if (rect.bottom > startRect.bottom) {
                rng.setStart(txt, i-1);
                rng.setEnd(txt, len);
                div = document.createElement("div");
                div.className = "indent";
                rng.surroundContents(div);
                indent(div);
                break;
            }
        }
    }
    else if (document.body.createTextRange) {
        var rng = document.body.createTextRange();
        rng.moveToElementText(div);
        var x = rng.getBoundingClientRect().right;
        rng.collapse();
        var rect = rng.getBoundingClientRect();
        var y = rect.bottom;
        rng.moveToPoint(x - 1, y - 1);
        rng.moveEnd("textedit");
        var html = "<div class=\"indent\">" + rng.text + "</div>";
        rng.pasteHTML(html);
        div = $(".indent", div)[0];
        rng.moveToElementText(div);
        var pos = rng.getBoundingClientRect();
        if (pos.bottom > rect.bottom) {
            indent(div);
        }
    }
}