Question

我正在使用javascript为任何尺寸的屏幕找到理想的字体大小，可以填充具有特殊宽度的div（例如父母的70％或40％）并且我想通过制作一个0.1em字体大小文本大0.1em，直到它填充父宽度或发生任何换行。我试图找到使用新字体大小后我的文字高度有多大，如果新高度大于1.7 *最后高度我停止脚本因为那里应该有换行但是这个代码不适用于一些较小的设备。有没有办法找到适用于所有屏幕尺寸的jquery的换行符？

这是我的代码：

var fit = function(inner , outter)
{
    var $inner = $("#"+inner), //rememver "var"
    $outter = $("#"+outter),
    fsize = 0.1 ;
    while(true)
    {
        var fheight = $outter.height();
        var a = fsize + "em" ;
        $inner.css({'font-size' : a});
        if((1.7 * fheight) < $outter.height() )
        {
            fsize = fsize - 0.1 ;
            a = fsize + "em";
            $inner.css({'font-size' : a});
            return; //change breck with return (that return all function)
        }
        if($outter.width() < $inner.width())
        {
            fsize = fsize - 0.1 ;
            a = fsize + "em";
            $inner.css({'font-size' : a});
            return; //change breck with return (that return all function)
        }
        fsize = fsize + 0.1 ;
    }
};

Answer 1

可以使用font-size的px值来完成，而不是em的吗？

检查此解决方案：

http://jsfiddle.net/68LCb/4/

HTML：

<div class="asd">asdasd asd Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>

CSS：

.asd {
    width: 60%;
    margin: 0 auto;
    outline: 1px solid red;
    /*unfortunatelly THIS has to be specified; */
    font-size: 12px;
    line-height: 1;
}

jQuery的：

$(document).ready(function() {
    shrinkText($('.asd'));
})

function shrinkText(d) {
    d.css({'font-size': parseInt(d.css('font-size'))+1});
    var diff = d.height() - parseInt(d.css('line-height'));
    console.log(diff);
    if (diff > 0 )
        d.css({'font-size': parseInt(d.css('font-size'))-1});
    else
        shrinkText(d);
}

Answer 2

http://jsbin.com/AyUgUhO/2/edit?html,js,output

使用这段代码

 var p = $('p'), w = $(document.body).innerWidth();
 p.css({
   'font-size': '1px',
   'float': 'left',
   'white-space': 'nowrap'
 });
 for(var i = 1; i < w; ++i){
   p.css({
     'font-size': i+'px'
   });
   if(p.width() > w) return;
 }

查找换行符

2 个答案: