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 the size of the same, leaving impossible to print. I need to know if you can automatically sort the font size so that the text of div never exceeds% height and width.
see how the problem in
link
$(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><scriptsrc="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 plugin textfill . It resizes the source according to the div. I did some testing with the print preview of Chrome and IE 11 and kept the font size.
To solve this problem of words exceeding div , you can use the overflow: auto; property
In your example it would look like this:
div {
font-size: 100%;
border: 1px solid red;
height: 200px;
width: 200px;
overflow: auto;
}
See the JSFiddle .
You can also do this by adjusting the content scaleY inside the container:
$(function() {
$('.container').each(function() {
var scaleY = $(this).height() / $('.conteudo', this).height(),
translateY = (($('.conteudo', this).height() - $(this).height()) / 2) * -1;
$('.conteudo', this).css({
'-webkit-transform': 'matrix(1,0,0,' + scaleY + ',0,' + translateY + ')',
'-moz-transform': 'scaleY(1,0,0,' + scaleY + ',0,' + translateY + ')',
'-ms-transform': 'scaleY(1,0,0,' + scaleY + ',0,' + translateY + ')',
'-o-transform': 'scaleY(1,0,0,' + scaleY + ',0,' + translateY + ')',
'transform': 'scaleY(1,0,0,' + scaleY + ',0,' + translateY + ')'
});
});
});.container {
float: left;
font-size: 100%;
border: 1px solid red;
height: 200px;
width: 200px;
margin-right: 10px
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="container">
<div class="conteudo">
Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe
</div>
</div>
<div class="container">
<div class="conteudo">
Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola
Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe Hola Pepe
</div>
</div>In these cases the good thing is to use em instead of px for the font size, you can see more about it here: link .
Also, the text should not populate its container, unless there are no spaces in your text, so in the container use the word-wrap property ( link ).
If you do not solve your problem, please post here your code so we can help you more ...