字体大小更改时动态调整容器大小

Question

我使用max-width为120px inline-block在单独的div显示句子中的每个单词。 当我尝试增加父div上的字体大小时，由于字体较大，div的内联块会重叠。

有没有办法以编程方式计算增加字体大小后使用的div的内联块所需的max-width ？

以下是示例代码段：

 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> 

继续按+按钮，在某个阶段你会发现div相互重叠。 我想通过计算我的max-width来解决这个问题，以便在增加font-size后根据初始大小120px获得精确的比例。

Answer 1

增加字体大小时，请确保增加行高。

我不认为你想要以编程方式设置每个div的宽度，让CSS为你做。 我假设您还没有这样做，如果是这样，请尝试将其设置为自动。 最后，我可能会更适合你。

很抱歉这个模糊的答案，但是如果你发布代码，我会给你一个更具体的答案。

Answer 2

你的CSS：

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

和HTML：

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

添加了break-word css选项。 这是完整的小提琴： http ： //jsfiddle.net/eugensunic/76KJ8/74/

Answer 3

我想我有一个解决方案。 从来没有想过在增加font-size之后使用child div的span来获取元素宽度就不那么简单了。 然后用span宽度值替换子div上的max-width 。 在增加font-size后，它将根据您的初始max-width值120px为您提供精确的比率，同时还要小心包装div，以防它超过parentDiv的宽度。

这是代码片段：

 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> 

Answer 4

使用宽度自动....

`<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>`