固定宽度容器内文本变长时如何自动调整字体大小适配容器

你之前使用vw单位无法满足需求的原因很简单：vw是相对于浏览器视口宽度的单位，仅会响应窗口尺寸变化，完全感知不到容器内的文本长度变化，自然无法在文本变长时触发缩放。
针对你的需求，最优实现方案如下，优先推荐兼容性更强的JS方案，可完美适配所有场景：

方案1：JS动态调整（推荐，兼容性覆盖全平台） #

第一步：修改CSS约束 #

先固定label的容器尺寸，取消会自动撑开宽度的max-content配置：

.input-wrapper {
  display: flex;
  flex-direction: row;
  width: 70%;
}

label {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%; /* 固定宽度占比，和input加起来占满父容器 */
  background-color: var(--violet);
  overflow: hidden;
  /* 如果你需要允许多行文本，可删除下面的white-space配置，调整JS逻辑判断scrollHeight即可 */
  white-space: nowrap;
}

input {
  border: 1px solid var(--violet);
  width: 70%;
}

第二步：添加适配逻辑 #

通过JS检测文本宽度和容器宽度的差值，动态缩小字号直到文本完全容纳：

function adjustLabelFontSize() {
  const label = document.getElementById('fixed');
  let fontSize = 16; // 初始最大字号，可自行调整
  label.style.fontSize = `${fontSize}px`;
  // 最小字号设为8px，避免文本缩到看不清
  while (label.scrollWidth > label.clientWidth && fontSize > 8) {
    fontSize -= 0.5;
    label.style.fontSize = `${fontSize}px`;
  }
}

// 页面加载完成后执行一次
window.addEventListener('load', adjustLabelFontSize);
// 若label文本会动态修改，在文本更新后手动调用adjustLabelFontSize()即可

如果你是用React开发，可把逻辑放到useEffect中，监听文本依赖变量触发重新计算即可。

方案2：纯CSS SVG适配（无JS，仅适合固定高度容器） #

如果不想写JS，可借助SVG的自适应缩放能力实现：

<label id="fixed">
  <svg width="100%" height="100%" viewBox="0 0 200 50" preserveAspectRatio="xMidYMid meet">
    <text x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" fill="white">Gas cost</text>
  </svg>
</label>

只需调整viewBox的宽高数值匹配你的label容器尺寸即可，文本会自动缩放适配容器大小，兼容性也较好，支持所有主流现代浏览器。

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