FitText.js: A jQuery Plugin for Responsive Text That Automatically Fills Its Container
Add-ons
Plugin Description: Based on jQuery, with responsive behavior using a different approach from Bootstrap media queries.
Usage
Required Files:
1 2 3 4 5 | <script src="jquery.min.js"></script><script src="jquery.fittext.js"></script><script> jQuery("#responsive_headline").fitText();</script> |
fitText()You can specify parameters here to adjust the scaling ratio. The default value is 1.
1 2 3 | jQuery("#responsive_headline").fitText(1.2); // Adjust text resizing in the browser more quicklyjQuery("#responsive_headline").fitText(0.8); // Adjust text resizing in the browser more slowly; set the maximum and minimum font sizes using &jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }); |
Frequently Asked Questions:
Elements such asCarousels, Scrollers, Accordions, TabsThese effects need to be hidden or cannot have their width adjusted. FitText.js does not work on these elements.
Make sure to specify the container width.
display: inline This CSS property does not have a width. Please usedisplay: block ordisplay: inline-block+ A specific width (i.e. width: 100%).position:absolute This CSS property also needs a specific width.
评论