Available on NPM at https://www.npmjs.com/package/textfilljs, or as a standalone download. Full documentation available on GitHub

Interactive Demo

What is monkey thinking?

Maximal font size in pixels for the monkey?

What does the computer display?

Maximal font size for the display?

I think, therefore I am.

e=mc²

Curated Examples

A selection of curated examples exploring some features and functionality of TextFill.

Example 1

Simple example with a few of the alternatives for calling TextFill on an element. Makes the text in the span as big as possible without overflowing the parent div.

HTML:

        <div id="div1" class="div1class" style="width: 300px; height: 200px">
          <span>
            Testing TextFill
          </span>
        </div>

Javascript:

        TextFill("#div1");
        //or
        TextFill("div"); // This will TextFill all divs.
        //or
        TextFill(document.getElementById("#div1"));
        //or
        TextFill(".div1class")
        //...and many more.

Testing TextFill

Example 2

Same as Example 1 but with a different size div. Notice that textfill.js checks both heights and widths to prevent overflowing, and provides automatic text wrapping.

div size: width: 800px; height: 100px;

Testing TextFill

Example 3

Same as Example 2 but with maxFontPixels set to 50px. Regardless of what the maximum font size could be, TextFill will respect that option and never exceed 50px font-size.

        TextFill("div#div3",{
            maxFontPixels: 50
        });

Testing TextFill

Example 4

Same as Example 3 but with a smaller text box. Although maxFontPixels was set to 50px, TextFill reduced the font-size below 50px so that the text did not overflow the container.

div size: width: 200px; height: 50px;

        TextFill("div#div4",{
            maxFontPixels: 50
        });

Testing TextFill

Example 5

Textfill respects manual line breaks, but also inserts new ones as necessary.

HTML:

        <div id="div5" style="width: 800px; height: 200px">
          <span>
            Testing TextFill by writing a long sentence that will wrap.
            <br />
            This text will always be on it's own line.
          </span>
        </div>

Javascript:

        TextFill("#div5");

Testing TextFill by writing a long sentence that will wrap.
This text will always be on it's own line.

Example 6

If you want to prevent TextFill from adding line breaks, and instead ensure that text always stays on one like, you can enable this with the widthOnly option. May cause text to become very small.

    TextFill("div#div6",{
      widthOnly: true;
    });

Testing TextFill. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper mattis semper.

Example 7

TextFill reponds to font-relative `line-height` and `letter-spacing`.

    TextFill("div.div7");

In this example, `line-height` is set to 4 and manual line breaks have been inserted between the two words.

Testing
TextFill

In this example, `letter-spacing` is set to `4em`.

Testing TextFill

In this example, `line-height` is set to 4, whilst `letter-spacing` is set to `4em`.

Testing TextFill

Example 8

We can change the inner tag to any inline tag of our choice using the innerTag option. We aren't restricted to just using a span.
HTML:

        <div id="div8" style="width: 200px; height: 200px">
          <p>
            Testing TextFill
          </p>
        </div>

Javascript:

        TextFill("#div8", {innerTag: "p"});

Testing TextFill

Example 9

The child element of the tag you call TextFill() on can have other elements inside it. If you set the font-size in the em unit in these elements you can have bigger text followed by smaller text like below. Using this technique you can also have any kind of text, like font-awesome icons.
HTML:

    <div id="div9" style="width: 350px; height: 100px">
      <span>
        <i class="fa fa-home" style="font-size: 1.3em"></i>
        <span style="font-size: 1.2em">Big</span>
        <span style="font-size: 0.8em">small</span>
        <i class="fa fa-home" style="font-size: 0.5em"></i>
      </span>
    </div>

Javascript:

        TextFill("div#div9");

Big small

Example 10

We can also set a minimum font size that TextFill can never go below using minFontPixels. With the allowOverflow option being set to false (the default), TextFill will fail to resize the text, effectively doing nothing.

    //This fails and does nothing
    TextFill("div#div10a",{
      allowOverflow: false,
      minFontPixels: 13,
    });

Testing TextFill. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ullamcorper mattis semper. Sed placerat ac mi a cursus. Nulla vulputate felis nec nisi eleifend, ac gravida arcu vulputate. Morbi iaculis justo nec eros accumsan, vel mattis metus tincidunt. Morbi tincidunt sed nisl quis efficitur. Donec euismod sem at consequat sagittis. Nulla magna ipsum, pellentesque eget odio at, pulvinar suscipit nisl. In hac habitasse platea dictumst. Proin semper erat vitae orci aliquet sollicitudin. Duis facilisis venenatis iaculis. In at malesuada felis. Sed ornare eu dui id dignissim. Nullam sed nisi vitae ex dictum molestie non ut libero. Nam ut vulputate felis.

The above text remained at the same font size it had before TextFill was applied.

We can set a callback to execute on a failure.

    //This fails, but calls the callback
    TextFill("div#div10b",{
      allowOverflow: false,
      minFontPixels: 13,
      fail: function(element) {
        element.style.background = "red";
      }
    });

The above text remained at the same font size it had before TextFill was applied, but a callback was executed (which make the background red).

With allowOverflow set to true, the text will be resized down to the minimum pixels (if not bigger when the container is big enough), and any excess text is allowed to overflow the container.

    TextFill("div#div10c",{
      allowOverflow: true,
      minFontPixels: 13,
    });

Note: Text overflow above is intentional.

Example 11

We can set TextFill to automatically rerun when the page resizes. Resize your browser window (or rotate your mobile device) to see it in action.

HTML:

        <div id="div11" style="max-width: 50vw; max-height: 10vh">
          <p>
            Testing TextFill
          </p>
        </div>

Javascript:

        TextFill("#div11", {autoResize: true});

Testing TextFill

Final Example

A more complex arrangement. We can run the function on all four divs in the same TextFill call.

        TextFill("div#complex-div1, div#complex-div2, div#complex-div3, div#complex-div4");

Text

Fill

AWESOME