如何实现按钮随内部文本尺寸自适应，避免文本溢出？

Great question! The core issue here is your button uses fixed width and height values, so it can’t expand to fit longer text, and the large 6vw font size pushes content outside those rigid bounds. Let’s fix this step by step:

Step 1: Ditch Fixed Dimensions for Flexible Spacing #

First, remove the fixed width and height from your .Btns class. Instead, use padding to create internal spacing, and let the button’s size be determined by its content. You can add optional minimum dimensions if you want to prevent it from getting too small:

.Btns {
  /* Remove fixed width/height */
  min-width: 100px; /* Optional: set a minimum width */
  min-height: 75px; /* Optional: set a minimum height */
  padding: 1rem; /* Adds breathing room inside the button */
  background-color: lightblue;
  color: black;
  font-weight: bold;
  display: inline-flex; /* Uses flexbox for clean content alignment */
  flex-direction: column; /* Stacks text elements vertically */
  gap: 0.5rem; /* Controls space between "Production:" and the number */
  align-items: center; /* Centers text horizontally */
  justify-content: center; /* Centers text vertically */
}

Step 2: Use Responsive Font Sizing #

The 6vw font size can get too large for small buttons or very long numbers. Use clamp() to set a font size that scales with the viewport but stays within reasonable limits:

.blue {
  color: blue;
  /* clamp(min-size, preferred-size, max-size) */
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  /* Remove overflow:hidden since we want the button to adapt */
}

Step 3: Clean Up the HTML Structure #

Instead of relying on <br> tags for spacing (which isn’t semantic), let flexbox’s gap handle the space between elements. Update your JavaScript to remove the extra breaks:

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

Bonus: Handle Extremely Long Numbers #

If you expect very long numbers that might need to wrap, add word-break to the .blue class:

.blue {
  color: blue;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  word-break: break-all; /* Allows long numbers to wrap onto multiple lines */
}

How This Works: #

• The button now grows horizontally/vertically to fit its content, no more overflow.
• Flexbox keeps your text aligned neatly without messy line breaks.
• clamp() ensures the number stays readable on all screen sizes.

内容的提问来源于stack exchange，提问作者papagallo