Geek Answers Handbook

Dynamically resize container when changing font size

I show each word in a sentence in a separate div using inline-block with max-width of 120px . When I try to increase the font size on the parent div, my inline div block gets overlaps due to the large font size.

Is there a way to programmatically calculate the max-width needed for an inline div block to be used after increasing the font size?

Here is an example code snippet:

 jQuery('.btnIncFont').click(function(){ jQuery('.parentDiv').css('font-size',parseInt(jQuery('.parentDiv').css('font-size'))+2); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btnIncFont">+</button> <div class="parentDiv"> <div style="display:inline-block;max-width:120px">This is a test1</div> <div style="display:inline-block;max-width:120px">This is a test2</div> <div style="display:inline-block;max-width:120px">This is a test3</div> <div style="display:inline-block;max-width:120px">This is a test4</div> </div>

Continue to press the + button, and at a certain stage you will find that the div overlaps each other. I want to fix this by calculating for my max-width to achieve the exact ratio according to the initial size of 120px after increasing the font size.

+5
source share
4 answers

I think I have a solution. I never thought that it would be as simple as using only the span inside the child div to get the width of the element after increasing the font size. Then replace max-width with the child div with span width. It will give you an accurate coefficient based on the original max-width 120px after increasing the font size and at the same time also take care of wrapping the div if it exceeds the width of parentDiv .

Here is the code snippet:

 jQuery('.btnIncFont').click(function() { jQuery('.parentDiv').css('font-size', parseInt(jQuery('.parentDiv').css('font-size')) + 2); var spanWidth = parseInt(jQuery('.parentDiv div span').css('width')); jQuery('.parentDiv div').css('max-width', ((spanWidth < 120)?120:spanWidth) + 'px'); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="btnIncFont">+</button> <div class="parentDiv"> <div style="display:inline-block;max-width:120px"><span>This is a test1</span> </div> <div style="display:inline-block;max-width:120px"><span>This is a test2</span> </div> <div style="display:inline-block;max-width:120px"><span>This is a test3</span> </div> <div style="display:inline-block;max-width:120px"><span>This is a test4</span> </div> </div>
0
source

As you increase the font size, make sure that you also increase the line height.

I don’t think you want to go the way of programmatically setting the width of each div, let CSS do it for you. I assume you are not doing this yet, if so, try tuning it to auto. Finally, I can do better for you.

Sorry for the vague answer, but if you post the code, I will give you a more specific option.

0
source

Your CSS:

 .v { word-wrap:break-word; display:inline; font-size:140px; border:2px solid blue; max-width:120px; }

and HTML:

 <div> <div class="v">This</div> <div class="v">is</div> <div class="v">a</div> <div class="v">test</div> </div>

Added option break-word css. Here is the full fiddle: http://jsfiddle.net/eugensunic/76KJ8/74/

0
source

use the width of the car ....

 `<div> <div style="display:inline-block;width:auto">This</div> <div style="display:inline-block;width:auto">is</div> <div style="display:inline-block;width:auto">a</div> <div style="display:inline-block;width:auto">test</div> </div>`
-1
source

More articles:


All Articles