jQuery 控制div框自动缩小字体避免换行

JS控制div框自动缩小字体填充,当div框中的字体超出div框范围的时候,框内的字体会自动缩小,以填充整个文本框;

调用:resetFontSize($(".title"), 50, 10, 20);//重置字体大小 

wordbox:jquery对象

maxHeight:box的最大高度

minSize:最小字体大小

maxSize:最大字体大小

this.resetFontSize=function (wordbox, maxHeight, minSize, maxSize) {
        //   var wordbox = $(".products .title");
        //最大高度
        //var maxHeight = 30;
        //初始化文字大小为最小
        wordbox.css('font-size', minSize + "px");
        maxSize++;
        wordbox.each(function () {
            //循环修改大小直至大于最大高度
            for (var i = minSize; i < maxSize; i++) {
                if ($(this).height() > maxHeight) {
                    //当容器高度大于最大高度的时候,上一个尝试的值就是最佳大小。
                    $(this).css('font-size', (i - 2) + 'px');
                    //结束循环
                    break;
                } else {
                    //如果小于最大高度,文字大小加1继续尝试
                    $(this).css('font-size', i + 'px');
                }
            }
        });
    };


  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值