dynamically changing the size of font size based on text length using css and html

Question

I need to display user entered text into a fixed size div. What i want is for the font size to be automatically adjusted so that the text fills the box as much as possible.

I'd probably want to start with a maximum font size and while the text is too big to fit the container, shrink the font size until it fits and the font must be displayed as a single line. Is it possible to do this using only css and html.

Answer 1

Say you have this:

<div id="outer" style="width:200px; height:20px; border:1px solid red;">     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div> </div> 

Then you can do something like:

$(document).ready(function () {     resize_to_fit(); });  function resize_to_fit(){     var fontsize = $('div#outer div').css('font-size');     $('div#outer div').css('fontSize', parseFloat(fontsize) - 1);      if($('div#outer div').height() >= $('div#outer').height()){         resize_to_fit();     } } 

Working Sample

$(document).ready(function() {    resize_to_fit();  });    function resize_to_fit() {    var fontsize = $('div#outer div').css('font-size');    $('div#outer div').css('fontSize', parseFloat(fontsize) - 1);      if ($('div#outer div').height() >= $('div#outer').height()) {      resize_to_fit();    }  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="outer" style="width:200px; height:20px; border:1px solid red;">    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>  </div>