Smart jQuery Responsive Text Plugin - TextTailor.js

TextTailor.js is a jQuery plugin designed for responsive web layout that automatically resizes font size to make your text fit within its parent container.

The plugin also has the ability to hide the overflowed text using ellipsis in case your text doesn't fit the height (fixed or percentage) of the parent container.

Basic Usage:

1. Load the latest version of jQuery library from a CDN and the jQuery texttailor.js at the bottom of your responsive webpage.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.texttailor.js"></script>

2. Wrap your text into a container element.

<div class="demo">

  Your text goes here

</div>

3. Gives a height (fixed or percentage) to the container element in the CSS.

.demo {
  width: xx%;
  height: xx%;
}

4. Call the plugin on the container to active the responsive text.

$('.demo').textTailor();

6. Options available.

$('.demo').textTailor({OPTIONS});

• minFont: 1: minimum font (use with fit: true)
• maxFont: 9999: maximum font (use with fit: true)
• preWrapText: false: adds css -> white-space: pre-line
• lineHeight: 1.45: line-height property
• resizable: true: tailor again on window resize
• debounce: false: use with resizable: true
• fit: true: fit the text to the parent's height and width
• ellipsis: true: ellipsis the text if it doesn't fit
• center: false: absolute center relatively to the parent
• justify: false: adds css -> text-align: justify

Changelog:

2020-06-09

• v0.1.2

2019-01-29

• JS updated

---

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