Resize Text To Fit Max Number Of Lines - fontScaler

File Size: 4.78 KB
Views Total: 786
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Resize Text To Fit Max Number Of Lines - fontScaler

fontScaler is a text resize jQuery plugin to limit the maximum number of text lines that dynamically adjusts the font size of your text to fit inside its parent container.

How to use it:

1. Load the JavaScript file jquery.fontScale-0.1.js after you've loaded the latest version of jQuery library.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous"></script>
<script src="scripts/jquery.fontScale-0.1.js"></script>

2. Wrap your text into a container and specify the maximum number of lines in the data-maxlines attribute as follows:

<div data-resizetext="true" data-maxlines="3">
  This has 3 lines set as the maxlines. This is some text that I am checking. This is some text that I am checking. This is some text that I am checking.
</div>

<div data-resizetext="true" data-maxlines="4" >
  This one is 4. This is some text that I am checking. This is some text that I am checking. This is some text that I am checking. This is some text that I am checking.
</div>

<div data-resizetext="true" data-maxlines="2">
  This one is 2. This is some text that I am checking. This is some text that I am checking.
</div>

<div data-resizetext="true">
  This one is default, which is 3. This is some text that I am checking. This is some text that I am checking. This is some text that I am checking. This is some text that I am checking.
</div>

3. Initialize the plugin and we're done.

$('[data-resizetext="true"]').each(function(){
  $(this).fontScale();
})

4. Possible parameters:

  • text: text to resize
  • font: font size
  • maxLines: max number of lines
$.fontScale(text, font, maxLines);

This awesome jQuery plugin is developed by jmckennay. For more Advanced Usages, please check the demo page or visit the official website.