adapttext.js是一款简单实用的jQuery响应式文字插件。该插件通过计算文本的font-size来使文字适应它的父容器的宽度和高度。
安装
可以通过npm和bower来安装adapttext.js插件。
npm install adapttext.js --save-dev bower install adapttext.js --save-dev
使用方法
在页面中引入adapttext.js文件。
<script type="text/javascript" src="js/gauge.min.js"></script>
不依赖jQuery
adapttext.js可以不依赖于jQuery而单独使用,例如:
<div id="mybox"> <span>This is an example test...</span> </div>
添加样式:
#mybox { width: 50%; height: 30%; }
初始化插件:
var el = document.getElementById('mybox'); var adapt = new AdaptText(el);
作为jQuery插件使用
adapttext.js也可以作为jQuery插件来使用。例如:
$('.mybox').adaptText(options);
如果在稍后需要用到adapttext.js的实例对象,可以如下操作:
var instance = $('.mybox').data('adaptText'); instance.destroy();
配置参数
adapttext.js响应式字体插件的配置参数有:
new AdaptText(el, { minFontSize: 10, //define in px the minimum font size possible maxFontSize: 200, //define in px the maximum font size possible tollerance: 10, //define a number of px of allowed exceed callback: function(newpx) { //this callback is called everytime a new font size is set //the first argument is the new font-size px value } });
-
minFontSize
:最小的字体大小,单位像素。 -
maxFontSize
:最大的字体大小,单位像素。 -
tollerance
:定义可以超出的像素范围。 -
callback
:回调函数。
方法
adapttext.js响应式字体插件的可用方法有:
-
.destroy()
:移除对窗口缩放事件的监听。 -
.elaborate()
:强制重新计算当前的字体大小。
adapttext.js响应式字体插件的github地址为:https://github.com/luruke/adapttext.js
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!