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

Question

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

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

这里是示例代码sn-p：

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 来解决这个问题，以便在增加字体大小后根据初始大小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>

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

Answer 3

我想我已经找到了解决办法。从来没有想过它会像在子div 中使用span 来在增加字体大小后获取元素宽度一样简单。然后将子 div 上的 max-width 替换为 span 宽度值。在增加字体大小后，它将根据您的初始max-width 值120px 为您提供确切的比率，同时还要注意包装 div，以防它超过parentDiv 的宽度。

这里是代码sn-p：

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