텍스트를 전체 채우기 위해 크기 조정

나는 고정 된 높이와 유체 너비 (body 너비의 15 %)를 가진 div입니다. 내부에 단락 텍스트를 넣어서 div으로 채우고 싶습니다. 오버플로가 아니며 언더필이 아님.텍스트를 전체 채우기 위해 크기 조정

단락의 높이가 컨테이너 높이 인 div과 같을 때까지 jQuery로 텍스트 크기를 증가 시키려고했습니다. 이 시점에서 본문은 모두 div을 포함해야합니다. 유일한 문제는 글꼴 크기가 0.5 픽셀 값으로 증가한다는 것입니다. 33.3px를 할 수 없습니다. 33.0px 또는 33.5px 중 하나 여야합니다. 따라서 33px에서 내 텍스트는 div을 다루기에는 너무 짧으며 33.5px에서는 오버플로됩니다.

누구든지 해결 방법에 대한 아이디어가 있습니까? 텍스트를 컨테이너의 전체 너비를 채우는 데 사용하는 플러그인이 많이 있지만 너비와 높이를 모두 채우는 텍스트는 아닙니다. 적어도, 내가 본 것은 없다.

<head> 
<style type="text/css"> 
.box { 
    display:block; 
    position:relative; 
    width:15%; 
    height:500px; 
    background:orange; 
} 
    .box p { 
     background:rgba(0,0,0,.1); /* For clarity */ 
    } 
</style> 
</head> 

<body> 

<div class="box"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br><br> 
    Suspendisse varius nibh quis urna porttitor, pharetra elementum nisl egestas. Suspendisse libero lacus, faucibus id convallis sit amet, consequat vitae odio.</p> 
</div> 

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> 
<script type="text/javascript"> 
function responsiveText(){ 
    var i = 0.5; 

    do { 
     $(".box p").css("font-size",(i) + "px"); 

     var textHeight   = $(".box p").height(), 
      containerHeight  = $(".box").height(); 
     i += 0.5; 

    } while (textHeight < containerHeight);   // While the height of the paragraph block is less than the height of the container, run the do...while loop. 
} responsiveText(); 


$(window).resize(function(e) { 
    responsiveText(); 
}); 
</script> 
</body>

Text set at 33px. It is too short. 텍스트 33px로 설정합니다. 너무 짧습니다.