如何实现字体自动缩放适配容器宽度？动态文本无换行自适应问询

Hey there! Let's tackle your two questions about scaling text to fit its container without wrapping—here are practical solutions for both static and dynamic content:

1. Static Text: CSS-Only Approach #

If your text content doesn't change, you can use CSS to lock the text to a single line and scale it to fit the container. Here's how to modify your code:

First, add this CSS:

.container {
  width: 80%; /* Adjust to your container's width */
  margin: 2rem auto;
}

.text-block, .text-block2 {
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.text-block2 {
  border-color: green; /* Highlight desired outcome */
}

/* Prevent wrapping and scale text */
.text-block h1, .text-block2 h1 {
  text-wrap: nowrap; /* Keep text on one line */
  /* Use clamp() to set responsive font sizes */
  font-size: clamp(1rem, 4vw, 3rem);
}

The clamp() function sets a minimum, preferred, and maximum font size—this ensures the text scales with the container (or viewport) without getting too small or large. For more precise control tied directly to the container's width, you can use container queries (supported in modern browsers):

.text-block2 {
  container-type: inline-size; /* Enable container queries for this element */
}

@container (width >= 700px) {
  .text-block2 h1 {
    font-size: 2.8rem;
  }
}

@container (width < 700px) {
  .text-block2 h1 {
    font-size: 1.6rem;
  }
}

2. Dynamic Text: Auto-Adjust with JavaScript #

If your text content changes dynamically (e.g., user input, API data), CSS alone won't cut it—we need JavaScript to calculate the perfect font size on the fly. Here's a complete implementation:

First, update your HTML to add an ID to the dynamic text element:

<body>
  <div class="container">
    <div class="text-block">
      <h1>Scale to 100% of text-block without wrapping</h1>
    </div>
    <h3>Desired outcome:</h3>
    <div class="text-block2">
      <h1 id="scaling-text">Scale to 100% of text-block without wrapping</h1>
    </div>
  </div>
</body>

Then add this JavaScript function to handle scaling:

function scaleTextToFit(textElement) {
  const container = textElement.parentElement;
  let fontSize = 1; // Start with a small base size
  textElement.style.fontSize = `${fontSize}px`;
  textElement.style.textWrap = 'nowrap'; // Ensure no line breaks
  
  // Increase font size until text touches container edges
  while (textElement.offsetWidth < container.offsetWidth && fontSize < 100) { // Cap max size to avoid absurdly large text
    fontSize++;
    textElement.style.fontSize = `${fontSize}px`;
  }
  
  // Step back one size to prevent overflow
  fontSize--;
  textElement.style.fontSize = `${fontSize}px`;
}

// Run on page load
window.addEventListener('load', () => {
  const scalingText = document.getElementById('scaling-text');
  scaleTextToFit(scalingText);
});

// Re-scale when window resizes (in case container changes size)
window.addEventListener('resize', () => {
  const scalingText = document.getElementById('scaling-text');
  scaleTextToFit(scalingText);
});

And add basic CSS to clean up the layout:

.container {
  width: 80%;
  margin: 2rem auto;
}

.text-block, .text-block2 {
  border: 1px solid #ccc;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.text-block2 {
  border-color: green;
}

#scaling-text {
  margin: 0; /* Remove default heading margin to fit better */
}

Quick Tips: #

• Always set a maximum font size in the JavaScript loop to avoid text getting too large on wide screens.
• If you update the dynamic text content later, just call scaleTextToFit() again with the updated element to re-adjust the font size.
• The text-wrap: nowrap property is critical here—without it, the text would wrap instead of scaling.

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