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

Question

我正在使用inline-block和max-width为120px来将句子中的每个单词显示在单独的div中。当我尝试增加父级div的字体大小时，由于字体过大，我的div的inline-block会重叠。

有没有办法在增加字体大小后以编程方式计算需要使用inline-block的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重叠在一起。我想通过计算来修复这个问题，以获得与初始大小120px相对应的确切比例的max-width，即增加字体大小后的比例。

- codelearner

---

你能否提供一些演示这个问题的代码？ - jshawl

请检查带有示例HTML的更新问题。 - codelearner

不停地按“+”按钮，在某个阶段，您会发现div重叠在一起。我希望通过计算我的max-width来修复这个问题，以达到根据初始大小120px递增字体大小的精确比例。 - codelearner

下次在发布问题之前请考虑多花一些时间，不要每5秒钟就进行编辑。 - EugenSunic

@eugensunic 欢迎随时提供对问题的反馈，更新问题也表明对解决方案更高的兴趣。 - codelearner

Answer 1

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

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

抱歉回答比较模糊，但如果你发布代码，我会给你更具体的答案。

- Kjell

---

我已经更新了问题...事实上，我也在我的inline-block divs上使用了 max-width。这就是为什么在增加字体大小后我必须计算宽度的原因。 - codelearner

如果你因某种原因必须使用max-width，请查看这个链接：https://dev59.com/EHVD5IYBdhLWcg3wAWsO - Kjell

如果您可以避免使用max-width，那么这个代码将非常好用，而且不需要任何CSS：https://jsfiddle.net/hdeb9q6b/1/ - Kjell

在我的更新问题中，不断按+按钮，到一定阶段，您会发现div重叠在一起。我想通过计算来修复这个问题，以便根据初始大小120px和增加字体大小后的确切比例来获得我的最大宽度。 - codelearner

Answer 2

我想我已经找到了一个解决方案。从未想过这么简单，只需要在子 div 中使用一个 span 来获取增加字体大小后的元素宽度。然后用 span 的宽度值替换子 div 上的 max-width 值。这将根据您初始的 max-width 值（120px）给出精确的比例，并在同时超出 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>

- codelearner

---

必须承认这是一篇很棒的文章！ - EugenSunic

每个成功的解决方案都会让帖子变得更好！ - codelearner

Answer 3

你的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选项。 这是完整的fiddle代码：http://jsfiddle.net/eugensunic/76KJ8/74/

- EugenSunic

---

如果您的最大宽度为120像素，增加字体大小只会在div变得太大时使其恶化... - EugenSunic

断词不是一个选项，而且这也不是一个完美的解决方案。如果我们增加字体大小，在某个阶段它会重叠 div 块。 - codelearner

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

- Sandeep