JSFiddle - React, Tailwind, and code Playground

by supertrue

HTML

<h1>Testing jQuery Textfill 0.2 Plugin</h1>
<a href="http://stackoverflow.com/questions/687998/auto-size-dynamic-text-to-fill-fixed-size-container/1696782#1696782">Source on StackOverflow</a>


<div class="box">
<p>This text should be resizing to fit the box, but it's not.</p>
</div>

<p>What's wrong with this code?:</p>
<pre>
$(document).ready(function() {
    $('.box').textfill({ maxFontSize: 36, minFontSize:2 });
});

</pre>

CSS

.box {
width: 200px;
    height: 200px;
    background: yellow;
}

JavaScript

; (function($) {
/**
* Resize inner element to fit the outer element
* @author Some modifications by Alexander Sandstorm
* @author Code based on earlier works by Russ Painter ([email protected])
* @version 0.2
*/
$.fn.textfill = function(options) {

    options = jQuery.extend({
        maxFontSize: null,
        minFontSize: 8,
        step: 1
    }, options);

    return this.each(function() {

        var innerElements = $(this).children(':visible'),
            fontSize = options.maxFontSize || innerElements.css("font-size"), // use current font-size by default
            maxHeight = $(this).height(),
            maxWidth = $(this).width(),
            innerHeight,
            innerWidth;

        do {

            innerElements.css('font-size', fontSize);

            // use the combined height of all children, eg. multiple <p> elements.
            innerHeight = $.map(innerElements, function(e) {
                return $(e).outerHeight();
            }).reduce(function(p, c) {
                return p + c;
            }, 0);

            innerWidth = innerElements.outerWidth(); // assumes that all inner elements have the same width
            fontSize = fontSize - options.step;

        } while ((innerHeight > maxHeight || innerWidth > maxWidth) && fontSize > options.minFontSize);

    });

};

})(jQuery);


//What am I doing wrong here?:

$(document).ready(function() {
    $('.box').textfill({ maxFontSize: 36, minFontSize:2 });
});