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