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

我使用

inline block

以

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

增加字体大小后，是否有任何方法可以通过编程方式计算div内联块所需的
最大宽度

以下是示例代码段：


jQuery（'.btnIncFont'）。单击（函数（）{
jQuery（'.parentDiv'）.css（'font-size'，parseInt（jQuery（'.parentDiv'）.css（'font-size'））+2）；
});

+
这是一个测试1
这是一个测试2
这是一个测试3
这是一个测试4
增加字体大小时，请确保同时增加行高

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

很抱歉回答含糊不清，但如果你发布代码，我会给你一个更具体的
 你的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>


这
是
A.
测试

添加了breakwordcss选项。这里是完整的小提琴：
使用宽度自动

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

`
这
是
A.
测试
`
我想我找到了解决办法。从来没有想过，在增加字体大小后，只需在child
div
内部使用
span
就可以获得元素宽度。然后将子div上的
max width
替换为
span
width值。在增加字体大小后，它将根据
120px
的初始
max width
值为您提供准确的比率，同时，如果div超过
parentDiv
的宽度，请注意包装div

下面是代码片段：


jQuery（'.btnIncFont'）。单击（函数（）{
jQuery（'.parentDiv'）.css（'font-size'，parseInt（jQuery（'.parentDiv'）.css（'font-size'））+2）；
var spanWidth=parseInt（jQuery（'.parentDiv-div span'）.css（'width'））；
jQuery（'.parentDiv'）.css（'max-width'，（（spanWidth<120）？120:spanWidth）+'px'）；
});

+
这是一个测试1
这是一个测试2
这是一个测试3
这是一个测试4
你能提供一些代码来说明这个问题吗？你怎么说它们重叠了，这里没有任何重叠，或者我遗漏了什么。请用示例HTMLkeep按+按钮检查更新的问题，在特定阶段，您会发现div相互重叠。我想用我的<代码>最大宽度< /代码>来计算，以在增加字体大小之后根据初始大小<代码> 120 px < /代码>达到精确的比率。下次请考虑在发布问题之前花更多的时间…不是每5秒编辑一次。我已经更新了问题。。。实际上，我在
内联块
div上也使用了
最大宽度
。这就是我在增加字体大小后必须计算宽度的原因。如果出于某种原因必须坚持使用“最大宽度”，请检查以下内容：如果您可以避开“最大宽度”，那么在没有任何CSS的情况下，这将很好地工作：在我更新的问题中，继续按+按钮，在特定阶段，您会发现div相互重叠。我想通过计算最大宽度来解决这个问题，以便在增加字体大小后，根据初始大小120px获得准确的比率。如果最大宽度为120px，增加字体大小只会在div太大时恶化div…break word不是一个选项，这也不是一个完美的解决方案。如果我们增加字体大小，它将在特定阶段重叠div块。必须承认这是一篇很棒的文章@eugensunic每一个成功的解决方案都会让帖子变得很棒！