javascript - 如何使按钮随其中文本的大小而变化

Question

正如您在我在以下链接的示例中看到的那样，如果数字增加，则文本将从按钮溢出。我怎样才能使它灵活地始终适合按钮的大小？

The Sample

$("button").html('<span>Production:</span></br></br><span class="blue" >555555555</span>');

.Btns {
  width: 100px;
  height: 75px;
  background-color: lightblue;
  color: black;
  font-weight: bold;
}

.blue {
  color: blue;
  font-size: 6vw;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn" type="button" class="Btns"></button>
<button id="btn1" type="button" class="Btns"></button>
<button id="btn2" type="button" class="Btns"></button>
<button id="btn3" type="button" class="Btns"></button>

Answer 1

如果您只是删除 width:100px;，那么按钮大小将自动更改为其内容的大小。

$("button").html('<span>Production:</span></br></br><span class="blue" >555555555</span>');

.Btns {
               
            height:75px;
            background-color:lightblue;
            color:black;
            font-weight:bold;

        }

      .blue {
       color:blue;
       font-size:6vw;
       overflow:hidden;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn" type="button" class="Btns" >
 
      </button>
      <button id="btn1" type="button" class="Btns" >
 
       </button>
      <button id="btn2" type="button" class="Btns" >
 
      </button>
      <button id="btn3" type="button" class="Btns" >
 
       </button>