Fit Text To The Width Of Its Container - jQuery FitToParent.js

FitToParent.js is a jQuery responsive text plugin that dynamically changes the font size of the text (single line) to fit the width & height of its parent container.

See Also:

• 10 Best JavaScript Plugins For Responsive Text

How to use it:

1. Load the jQuery FitToParent.js plugin's files in the document.

<link rel="stylesheet" href="/path/to/FitToParent.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/FitToParent.js"></script>

2. Specify the element that must fit to its parent.

<div id="parent">
  <div id="text">ANY TEXT HERE<div>
</div>

const $elem = $("#text");

3. Specify the percentage of the max width that the element should occupy in parent (default = 100).

const maxWidthPerc = 100;

4. Specify the percentage of the max height that the element should occupy in parent (default = 100).

const maxHeightPerc = 100;

5. When multiple elements are being resized and the desire is to have them share the same font-size at the end then you assign the same group (string) to them. Otherwise leave as null (default = null).

const group = null

6. Determine how the text should align in the parent (default = "left").

const tAlign = "left";

7. Set the font family (default = "'Roboto Condensed', sans-serif" [Roboto Condensed if available otherwise sans-serif]).

const fontFamily = "'Roboto Condensed', sans-serif";

8. Determine whether to resize the text on window resize (default = true).

const autoResize = true;

9. Activate the plugin.

new FitToParent($elem, maxWidthPerc, maxHeightPerc, group, tAlign, fontFamily, autoResize);

---

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