JSFiddle - React, Tailwind, and code Playground

by jruddell

HTML

<div class="container">
    <h1>Paragraph 1</h1>
    <p>Sorry, we’re currently unable to access your security information.</p>
    <h1>Paragraph 2</h1>
    <p>We’re currently unable to access your security information. Please give us a few moments to resolve the issue and try again.</p>
    <h1>Paragraph 3</h1>
    <p>If this problem persists, please contact customer services.</p>
</div>

CSS

div.container {
border: 2px solid #888888;
padding: 30px;
}

div.text {
width: 290px; /* this is the part that would change */
}

h1 {
color: #333333;
font-family: "Helvetica";
font-size: 20px;
font-weight: bold;
line-height: 120%;
}

p {
color: #333333;
font-family: "Helvetica";
font-size: 15px;
font-weight: normal;
line-height: 155%;
}

JavaScript

// http://stackoverflow.com/a/5830517/39013
// I just made it a jquery plugin getCss
jQuery.fn.getCss= (function($){
    function css(a){
        var sheets = document.styleSheets, o = {};
        for(var i in sheets) {
            var rules = sheets[i].rules || sheets[i].cssRules;
            for(var r in rules) {
                if(a.is(rules[r].selectorText)) {
                    o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
                }
            }
        }
        return o;
    }

    function css2json(css){
        var s = {};
        if(!css) return s;
        if(css instanceof CSSStyleDeclaration) {
            for(var i in css) {
                if((css[i]).toLowerCase) {
                    s[(css[i]).toLowerCase()] = (css[css[i]]);
                }
            }
        } else if(typeof css == "string") {
            css = css.split("; ");          
            for (var i in css) {
                var l = css[i].split(": ");
                s[l[0].toLowerCase()] = (l[1]);
            };
        }
        return s;
    }
    return function(){
        return css(this);
    }
})(jQuery);

jQuery.fn.justify = (function($){
    var justify = function(el, config){
        this.el = $(el);
        this.config = config;
        
        this.init();
        this.changeBreaks();
        this.bind();
    };
    
    justify.prototype = {
        init: function(){
            var self = this;
            this.css = this.el.getCss();
            console.log(this.css);
            this.text = this.el.text();
            this.unboundWidth = this.getUnboundWidth();                // unwrapped width
            this.width = this.el.width();                              // width, updated by resize
            
            this.words = this.text.split(/\s/g);                       // split on words
            // optimize?
            this.wordsWidth = this.words.map(function(word, i){
                return self.getUnboundWidth(word +...