javascript - 如何保持 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;
}