How to make the font size automatically fit the size of a div

Asked

Viewed 7,505 times

2

Hi, I have a div of 300px for 300px, on 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 invaluable for printing. I need to know if you have how to automatically resize the font size so that the text of div never exceed 300px height or width. see how the problem in http://jsfiddle.net/xVB3t/1747/

html css html5

5 answers

3


$(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 jQuery plugin textfill. It resizes the font according to the div. I ran some tests with Chrome print preview and IE 11 and kept the font size.

  • Here’s everything out of the div on your snippet.

2

To solve this problem of words going beyond the div, you can use the property overflow: auto;

In your example it would look like this:

div {
    font-size: 100%;
    border: 1px solid red;
    height: 200px;
    width: 200px;
    overflow: auto;
}

See on Jsfiddle.

  • Hi Tais. It asks for a fixed div 300x300. It is the text that needs to decrease automatically.

  • @Bacco, I don’t think you can do this just with CSS.

  • 1

    In fact, until today only saw with JS even. And no very simple no.

  • @Bacco, yes, with JS has how, but I do not know what his goal is. In my opinion, thinking about usability, it is better the user give a scroll, than the letter decrease the size.

2

You can also do this by adjusting the scaleY of the contents 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>
<div class="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>

1

  • I need according to the size of the div, I even found a similar way that worked more or less using font-size: 2.6vmin; but only helps the source according to the window and not according to the div

  • uses % instead of a value https://css-tricks.com/almanac/properties/f/font-size/

  • Putting percentage until it goes, but when the text and very small the font remains small does not fit.

  • now it is a matter of adjustment, from a read on this here https://web-design-weekly.com/2014/11/viewport-units-vw-vh-vmin-vmax/

  • posted an ex q I did in fiddle

  • Good guy, I opened your example I put a text with 100 words and the font did not decrease in size remained the same and the div did not keep the initial size she burst in size.

  • got it I’ll see if I can find some solution

Show 2 more comments

0

  • I have tried so changing the units of measures, it did not work :(

  • posted as is your code so both html and css

  • edited put a link to jsfiddle with my problem

  • i had misunderstood your problem @joaopaulosantosalmeida, at first I do not know if there is a solution to do this effectively, but I will take a look...

Browser other questions tagged html css html5

You are not signed in. Login or sign up in order to post.