即使其中文本的字体大小发生变化，您如何保持 div 大小不变

Question

请参阅下面的演示。 当您单击按钮时，字体大小会发生变化，这会使 div 框增大和缩小。 我不想改变盒子的大小。

我如何防止这种情况？

 $('#button-plus').click(() => { var currentFontSize = parseInt($('.main > span').css('font-size')); $('.main > span').css('font-size', currentFontSize + 5 + 'px'); }); $('#button-minus').click(() => { var currentFontSize = parseInt($('.main > span').css('font-size')); $('.main > span').css('font-size', (currentFontSize - 5) + 'px'); })

 .main { text-align: center; width: 200px; max-width: 200px; overflow: overflow; padding: 10px 5px; border: 2px solid #bbb; } .main > span { font-size: 12px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <span>Some Text</span> </div> <button id="button-plus">+</button> <button id="button-minus">-</button>

Answer 1

您似乎正在尝试为 div 框创建固定的宽度和高度。 您可以通过在.main类中包含高度来简单地解决此问题。

.main {
  text-align: center;
  width: 200px;
  height: 20px; // <-- specify a height.
  max-width: 200px;
  overflow: overflow;
  padding: 10px 5px;
  border: 2px solid #bbb;
}

.main > span {
  font-size: 12px;
}

Answer 2

不完全清楚您期望什么行为。

一种方法可能是在页面加载时采用当前高度并将其内联应用，以便使用以下方法使其成为固定高度：

$('.main').height((_,curr) => curr)

另一种选择是使用 css 弹性框规则

 $('#button-plus').click(() => { var currentFontSize = parseInt($('.main > span').css('font-size')); $('.main > span').css('font-size', currentFontSize + 5 + 'px'); }); $('#button-minus').click(() => { var currentFontSize = parseInt($('.main > span').css('font-size')); $('.main > span').css('font-size', (currentFontSize - 5) + 'px'); }); $('.main').height((_,curr) => curr)

 .main { text-align: center; width: 200px; max-width: 200px; overflow: auto; padding: 10px 5px; border: 2px solid #bbb; } .main > span { font-size: 12px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <span>Some Text</span> </div> <button id="button-plus">+</button> <button id="button-minus">-</button>

Answer 3

$('#button-plus').click(() => {
 var currentFontSize = parseInt($('.main > span').css('font-size'));
 $('.main > span').css('font-size', currentFontSize + 5 + 'px');
});

$('#button-minus').click(() => {
 var currentFontSize = parseInt($('.main > span').css('font-size'));
 $('.main > span').css('font-size', (currentFontSize - 5) + 'px');
})
.main {
  text-align: center;
  width: 200px;
  height: 400px;
  overflow: overflow;
  padding: 10px 5px;
  border: 2px solid #bbb;
}

.main > span {
  font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
  <span>Some Text</span>
</div>

<button id="button-plus">+</button>
<button id="button-minus">-</button>