줄 바꿈 찾기

Question

나는 특별한 크기의 자기 (예 : 부모의 70 % 또는 40 %)로 div를 채울 수있는 화면 크기에 이상적인 글꼴 크기를 찾기 위해 자바 스크립트를 사용하며이 목표를 달성하고자합니다. 부모 폭을 채울 때까지 또는 줄 바꿈이 발생할 때까지 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

은이 글꼴 크기의 픽셀 값을 사용하여 수행 할 수 있습니다 : 여기

내 코드?

확인이 솔루션 :

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; 
}