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

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

我如何防止这种情况

$（'#按钮加号'）。单击（（）=>{
var currentFontSize=parseInt（$（'.main>span'）.css（'font-size'））；
$（'.main>span'）.css（'font-size'，currentFontSize+5+'px'）；
});
$（'#按钮减号'）。单击（（）=>{
var currentFontSize=parseInt（$（'.main>span'）.css（'font-size'））；
$（'.main>span'）.css（'font-size'，（currentFontSize-5）+'px'）；
})

.main{
文本对齐：居中；
宽度：200px；
最大宽度：200px；
溢出：溢出；
填充：10px 5px；
边框：2个实心#bbb；
}
.main>span{
字体大小：12px；
}

一些文本
+
-

不完全清楚您期望的行为

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

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

另一种选择是使用css flex box规则

$（'#按钮加号'）。单击（（）=>{
var currentFontSize=parseInt（$（'.main>span'）.css（'font-size'））；
$（'.main>span'）.css（'font-size'，currentFontSize+5+'px'）；
});
$（'#按钮减号'）。单击（（）=>{
var currentFontSize=parseInt（$（'.main>span'）.css（'font-size'））；
$（'.main>span'）.css（'font-size'，（currentFontSize-5）+'px'）；
});
$（'.main'）。高度（（（当前值）=>curr）

.main{
文本对齐：居中；
宽度：200px；
最大宽度：200px；
溢出：自动；
填充：10px 5px；
边框：2个实心#bbb；
}
.main>span{
字体大小：12px；
}

一些文本
+
-

$（'#按钮加号'）。单击（（）=>{
var currentFontSize=parseInt（$（'.main>span'）.css（'font-size'））；
$（'.main>span'）.css（'font-size'，currentFontSize+5+'px'）；
});
$（'#按钮减号'）。单击（（）=>{
var currentFontSize=parseInt（$（'.main>span'）.css（'font-size'））；
$（'.main>span'）.css（'font-size'，（currentFontSize-5）+'px'）；
})
梅因先生{
文本对齐：居中；
宽度：200px；
高度：400px；
溢出：溢出；
填充：10px 5px；
边框：2个实心#bbb；
}
.main>span{
字体大小：12px；
}
一些文本
+
-

似乎您正在尝试为您的div框创建一个固定的宽度和高度。您只需在

.main

类中添加高度即可解决此问题

.main{
文本对齐：居中；
宽度：200px；
高度：20px；//跨度{
字体大小：12px；
}

overflow:overflow

是无效的css。如果您设置

overflow:auto

并给div一个明确的高度，您应该会得到您想要的结果。@dillon谢谢！我在玩它。它应该是“隐藏”的

$('#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>