textFit.min.js是一种快速、无依赖性的文本调整插件-BFW插件库

textFit.min.js是一种快速、无依赖性的文本调整插件

一种快速、无依赖性的文本调整插件，可快速使单行和多行文本适合其容器的宽度和/或高度。

textFit特性

快速，使用二进制搜索及时将文本快速适配到其容器中log n，使其速度远超大多数解决方案。

最合适的是<1ms。请参阅实施细节。

无依赖性。

小的。4.1KB缩小和1.5KB压缩。

支持水平和垂直居中，包括使用 Flexbox 的垂直居中以获得最大的准确性。

支持任何字体、填充和多行文本。

浏览器支持

textFit支持 IE9+、Firefox、Chrome、Opera 和大多数移动浏览器。如果您发现不兼容，请提出问题。

如果您需要 IE <= 8 支持，请使用jQuery 版本。v1.0 和 v2.0 之间的功能是相同的，唯一的变化是删除了 jQuery 依赖项。

使用方式：

第一步引入textFit

  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/textFit.min.js"></script>

第二步dom

<div class="box" style="width:300px;height:300px">
Fit me, I am some text
</div>

第三步js

textFit第一个参数是dom对象，可以是原生js也是可以是jquery引用的，第二个参数是settings设置，不是必填。

// textFit accepts arrays
textFit(document.getElementsByClassName('box'));
// or single DOM elements
textFit(document.getElementsByClassName('box')[0]);
// Use jQuery selectors if you like.
textFit($('#box')[0])

设置参数

settings= {
alignVert: false,//如果为 true,textFit 将使用 CSS 表格垂直对齐
alignHoriz: false,//如果为 true,textFit 将设置 text-align: center
multiLine:false,//如果为 true,textFit 不会设置 white-space:no-wrap
detectMultiLine: true,//禁用时关闭自动检测多行
minFontSize:6,
maxFontSize:80,
reProcess: true,//如果为 true,textFit 将重新处理已经适应的节点。设置为"false "则能提高性能
widthOnly:false,//如果为 true,textFit 将只按元素宽度适应文本,而不考虑文本高度
alignVertWithFlexbox:false,//如果为 true,textFit 将使用 flexbox 垂直对齐
}

完整代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/textFit.min.js"></script>
</head>

<body style="display:flex;">
    <div style="width:300px;height:300px;border:1px solid">
        This text <br> Has multiple lines <br> Fit me!
    </div>
    <div class="box" style="width:300px;height:300px;border:1px solid">
        This text <br> Has multiple lines <br> Fit me!
    </div>
<div class="hbox" style="width:300px;height:300px">
  This text <br>
  Has multiple lines <br>
  And wants to be centered horizontally and vertically<br>
  Fit me!
</div>
<div class="mbox" style="width:300px;height:300px">
  Short Text
</div>
    <script type="text/javascript">
        // textFit accepts arrays
        textFit(document.getElementsByClassName('box'));
        textFit(document.getElementsByClassName('hbox'), {alignHoriz: true, alignVert: true})
        textFit(document.getElementsByClassName('mbox'), {minFontSize:10, maxFontSize: 50})
        // or single DOM elements
        //textFit(document.getElementsByClassName('box')[0]);
        // Use jQuery selectors if you like.
        //textFit($('#box')[0])
    </script>

</body>

</html>

github：https://github.com/STRML/textFit