Fit text into HTML element by jQuery: 2 Demos

Fixing text in HTML elements by jQuery

The textfit plug-in fits the text in one line according to the width of the element that contains it. It adjusts the font-size of text with respect to the width of the element.

The plug-in size is just 1K that you may place before the body closing tag. The options allow specifying the minimum and maximum pixel size as shown in the demos below.

Demo1 Demo2

Developer’s page Download plug-in

Make the plug-in working

Include the textfit.js with the jQuery library:

<script src=”https://code.jquery.com/jquery-2.2.4.min.js”></script>

<script src=”js/jquery-textfit/textfit.js”></script>

You have to refer the class textfit to any element with one line text. For example:

<div class="textfit">

A demo of fixing text

</div>

A demo of fixing text in element with default options

In this example, the text is fit in a div element with default options. For that, the class textfit is assigned to the div elements without any options (to use the default values). Resize the screen and test how text adjusts with the screen size:

See online demo and code

You just need to refer the required class – no need to initiate the plug-in:

<div class="page">

                <div>

                                <div class="textfit">

                                textfit.js

                                </div>

                                <div class="textfit">

                                A demo of fixing text

                                </div>

                </div>

</div>

An example of using the available options

You may use the available options as data attributes. The option that can be used are:

• data-textfit-min //The minimum pixel size e.g. 10
• data-textfit-max //The maximum pixel size e.g. 80
• data-textfit-adjust //Scale the text if it is not fitting rightly. The example values can be 0.85. Specify from 0 to 2 where 0 is for tiny, 1 for normal and 2 for double.

See this demo online where all three options are used:

See online demo and code

The markup:

<div class="page">

                <div>

                                <div class="textfit">

                                textfit.js

                                </div>

                                <div class="textfit" data-textfit-min="30" data-textfit-max="80" data-textfit-adjust=".93">

                                Using options by data attributes

                                </div>

                </div>

</div>

To learn more about this simple plug-in, go to the developer’s page.