基于React/Javascript实现文本长度适配父Div的字体大小缩放

问题分析 #

CSS的clamp()只能基于视窗或容器的固定尺寸范围调整字号，无法根据文本实际长度和容器剩余空间的动态关系适配；而ScaleText类插件可能因配置或容器尺寸定义问题未生效。下面提供两种可靠的实现方案：

方案一：原生JavaScript动态计算（精准适配） #

通过JS实时对比文本尺寸与容器尺寸，动态调整字号，能完美适配文本长短变化和容器响应式变化。

代码示例 #

<div class="parent-container">
  <p class="text-content">这里是长短不一的文本内容，可能很短，也可能是一整段长篇描述</p>
</div>

<style>
.parent-container {
  max-width: 600px;
  max-height: 300px;
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  padding: 1.2rem;
  box-sizing: border-box;
}

.text-content {
  margin: 0;
  /* 预设字号范围，避免文本过大或过小 */
  --min-font: 12px;
  --max-font: 48px;
  font-size: var(--max-font);
}
</style>

<script>
function fitText() {
  const container = document.querySelector('.parent-container');
  const textEl = document.querySelector('.text-content');
  
  const containerW = container.clientWidth;
  const containerH = container.clientHeight;
  let currentSize = parseInt(getComputedStyle(textEl).getPropertyValue('--max-font'));
  const minSize = parseInt(getComputedStyle(textEl).getPropertyValue('--min-font'));

  // 逐步缩小字号，直到文本完全适配容器
  while (
    (textEl.scrollWidth > containerW || textEl.scrollHeight > containerH) &&
    currentSize > minSize
  ) {
    currentSize--;
    textEl.style.fontSize = `${currentSize}px`;
  }
}

// 初始化适配
fitText();
// 窗口 resize 时重新计算
window.addEventListener('resize', fitText);
// 如果文本内容动态变化，调用 fitText() 即可重新适配
</script>

优势 #

• 精准适配任何文本长度，确保文本始终在容器范围内
• 支持响应式容器尺寸变化
• 可自定义字号上下限，保证可读性

方案二：CSS容器查询 + clamp（简化版，适合场景有限） #

如果不需要极致精准，可结合CSS容器查询和clamp()实现近似效果，但仅能基于容器尺寸调整，无法感知文本长度。

代码示例 #

.parent-container {
  max-width: 600px;
  max-height: 300px;
  width: 100%;
  height: 100%;
  container-type: size; /* 开启容器查询 */
  padding: 1.2rem;
  box-sizing: border-box;
}

.text-content {
  margin: 0;
  overflow: hidden;
  /* 基于容器宽高计算字号，限制在12px-48px之间 */
  font-size: clamp(12px, min(7vh, 10vw), 48px);
}

局限性 #

• 文本过短时，字号无法突破vw/vh的限制，无法最大化利用容器空间
• 文本过长时可能出现截断，需配合overflow: hidden

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