5

I am displaying every word in a sentence in separate div using inline-block with max-width of 120px. When I try to increase the font size on parent div my inline-block of div get overlaps due to large font size.

Is there any way to programmatically calculate the max-width required for inline-block of div to be used after increasing the font size?

Here is sample 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>

Keep pressing the + button and at certain stage you will find that the div is overlapping each other. I want to fix this with calculation for my max-width to attain the exact ratio according to initial size 120px after incrementing font-size.

codelearner
  • 1,354
  • 1
  • 16
  • 32
  • 5
    can you include some code that demonstrates this issue? – jshawl Jul 25 '15 at 16:11
  • How do you mean they overlap? http://jsfiddle.net/eugensunic/76KJ8/72/, there isn't any overlapping here, or am I missing something – EugenSunic Jul 25 '15 at 16:24
  • 1
    plz check the updated question with sample HTML – codelearner Jul 25 '15 at 16:25
  • keep pressing the + button and at certain stage you will find that the div is overlapping each other. I want to fix this with calculation for my `max-width` to attain the exact ratio according to initial size `120px` after incrementing font-size. – codelearner Jul 25 '15 at 16:42
  • Next time please consider to take more time before posting a question... Not editing every 5 seconds. – EugenSunic Jul 25 '15 at 16:47
  • @eugensunic feedbacks are always welcome on the question and updating the question shows higher interest in the solution. – codelearner Jul 25 '15 at 17:04
  • @codelearner "I am displaying every word in a sentence in separate div using inline-block with max-width of 120px. " I think you're actually displaying every **sentence** in a separate div. Was that your original intent? – zer00ne Jul 25 '15 at 19:34
  • @zer00ne This is just a sample to easily track the overlapping of div blocks. But in actual, I am using words in separate blocks on my site. – codelearner Jul 26 '15 at 10:44

4 Answers4

0

When you increase the font-size make sure you are also increasing the line-height.

I don't think you want to go down the road of programmatically setting the width of each div, let the CSS do it for you. I'm assuming you aren't already doing that, if so, try setting it to auto. Lastly, I may suit you better.

Sorry for the vague answer but if you post the code I'll give you a more specific one.

Kjell
  • 101
  • 7
  • I have updated the question... Actually I am using `max-width` also on my `inline-block` divs. This the reason I have to calculate the width after increasing font-size. – codelearner Jul 25 '15 at 16:16
  • If you have to stick with max-width for some reason, check this out: http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript – Kjell Jul 25 '15 at 16:17
  • If you can get away from max-width, this will work nicely without any of the CSS: https://jsfiddle.net/hdeb9q6b/1/ – Kjell Jul 25 '15 at 16:36
  • In my updated question, keep pressing the + button and at certain stage you will find that the div is overlapping each other. I want to fix this with calculation for my max-width to attain the exact ratio according to initial size 120px after incrementing font-size. – codelearner Jul 25 '15 at 16:43
0

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 the break-word css option. Here is the full fiddle: http://jsfiddle.net/eugensunic/76KJ8/74/

EugenSunic
  • 13,162
  • 13
  • 64
  • 86
  • If your max-width is 120px, increasing the font-size will just deteriorate your div when it get's too big... – EugenSunic Jul 25 '15 at 16:58
  • break-word is not an option, also this is not a perfect solution. If we increment font-size it will overlap the div blocks at certain stage. – codelearner Jul 26 '15 at 11:05
0

I think I have got a solution. Never thought that it would be as much simple as using just a span inside child div to get the element width after increasing font-size. Then replacing max-width on child div with span width value. It will gives you the exact ratio based on your initial max-width value of 120px after incrementing font-size and at the same time also take care to wraps the div in case it exceeds the width of parentDiv.

Here is 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>
codelearner
  • 1,354
  • 1
  • 16
  • 32
-1

use width auto....

`<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>`
Sandeep
  • 1,461
  • 13
  • 26