html – How to make the font size automatically adjust to the size of a div

Question:

Hello, I have a div of 300px by 300px , in it I leave a text that comes from a database, the problem is that there are times when the text inside the div exceeds its size, leaving it inaccessible for printing. I need to know if I can automatically resize the font size so that the text in the div never exceeds 300px in height or width. see how the problem is at http://jsfiddle.net/xVB3t/1747/

Answer:

 $(document).ready(function() { $('#conteudo').textfill({ maxFontPixels: 12 }); });
 #conteudo { width: 300px; height: 300px; border: 1px solid red; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://jquery-textfill.github.io/js/textfill/jquery.textfill.js"></script> <div id="conteudo"> <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat at tortor sit amet euismod. Pellentesque dapibus bibendum felis, sit amet consectetur eros condimentum in. Cras efficitur tellus id lectus sagittis tincidunt. Aliquam imperdiet sem at laoreet elementum. Curabitur aliquam gravida varius. Praesent id pulvinar nulla. Mauris ultricies iaculis augue bibendum consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat at tortor sit amet euismod. Pellentesque dapibus bibendum felis, sit amet consectetur eros condimentum in. Cras efficitur tellus id lectus sagittis tincidunt. Aliquam imperdiet sem at laoreet elementum. Curabitur aliquam gravida varius. Praesent id pulvinar nulla. Mauris ultricies iaculis augue bibendum consequat. </span> </div>

I used the jQuery textfill plugin. It resizes the font according to the div. I ran some tests with the print preview in Chrome and in IE 11 and kept the font size.

Scroll to Top