Question

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

有没有办法以编程方式计算在增加字体大小后使用div的内联块所需的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>

按住max-width按钮，在某个阶段你会发现div相互重叠。我希望通过计算我的120px来解决此问题，以便在增加font-size后根据初始大小clicked获得确切的比率。

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之后只使用span内部子div来获取元素宽度就不那么简单了。然后用max-width宽度值替换子div上的span。在增加font-size之后，它会根据您max-width的初始120px值给出确切的比率，同时还要小心包装div，以防它超过{{1}的宽度}}

以下是代码段：

＆＃13;

parentDiv

＆＃13;

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');
});

＆＃13;

Answer 4

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

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

4 个答案: