如何设置HTML中间元素为不溢出视口的最大字号？

纯CSS方案（优先推荐） #

先搭建基础HTML结构，让容器占满整个视口，通过Flex布局分配首尾固定元素和中间动态元素的空间：

<div class="viewport-container">
  <div class="fixed-section">固定顶部内容</div>
  <div class="dynamic-text">这里是长度不确定的中间文本内容</div>
  <div class="fixed-section">固定底部内容</div>
</div>

对应的CSS：

/* 让容器占满视口，禁止页面滚动 */
.viewport-container {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 首尾固定元素：固定字号，自适应高度 */
.fixed-section {
  font-size: 16px;
  padding: 1rem;
  background: #f0f0f0; /* 可选：区分区域 */
}

/* 中间动态文本区域：占满剩余空间，自动调整最大字号 */
.dynamic-text {
  flex: 1;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 使用clamp()限制字号范围，结合视口单位和容器剩余空间 */
  /* 88px为首尾元素总高度，需根据实际情况调整 */
  font-size: clamp(1rem, min(8vw, calc((100vh - 88px) * 0.15)), 5rem);
  /* 确保文本自动换行，避免横向溢出 */
  white-space: pre-wrap;
  word-wrap: break-word;
  max-height: 100%;
  overflow: hidden;
}

方案说明 #

• clamp()同时设置字号的最小、基准、最大值：最小字号1rem保证可读性，基准值取视口宽度和容器剩余高度的计算值中的较小值，最大字号5rem防止文本过大；
• Flex布局让中间区域自动填充首尾元素之外的剩余视口空间；
• 文本换行属性确保长文本不会横向溢出容器。

JavaScript方案（适配极端场景） #

如果纯CSS无法覆盖极端文本长度的情况，可通过JS动态计算并调整字号，直到文本刚好不溢出容器：

HTML结构和基础CSS与纯CSS方案一致，添加以下JS代码：

const dynamicText = document.querySelector('.dynamic-text');

function adjustFontSize() {
  const containerWidth = dynamicText.clientWidth;
  const containerHeight = dynamicText.clientHeight;
  
  // 从大字号开始尝试，逐步缩小
  let fontSize = 100;
  dynamicText.style.fontSize = `${fontSize}px`;
  
  // 循环调整直到文本不溢出，同时限制最小字号
  while (
    (dynamicText.scrollHeight > containerHeight || dynamicText.scrollWidth > containerWidth)
    && fontSize > 12
  ) {
    fontSize--;
    dynamicText.style.fontSize = `${fontSize}px`;
  }
}

// 页面加载和窗口 resize 时触发调整
window.addEventListener('load', adjustFontSize);
window.addEventListener('resize', adjustFontSize);

方案说明 #

• 通过scrollHeight和scrollWidth判断文本是否溢出容器；
• 从大字号逐步缩小，直到文本刚好适配容器空间；
• 监听窗口大小变化，保证窗口调整时字号自动适配；
• 设置最小字号12px，避免文本过小影响阅读。

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