如何让文本根据容器高度自适应收缩，避免窗口高度调整时溢出？

问题根源分析 #

你当前设置容器#container高度为固定200vh，但内部文本字号为固定值，未和视口高度做绑定，所以窗口高度缩小时字号不会同步收缩，自然出现溢出问题。以下提供两种可直接落地的方案：

方案1：纯CSS实现（优先推荐） #

使用CSS动态单位+clamp()函数绑定字号，不需要额外JS，性能最优，直接修改你的现有样式即可：

/* Background && Wrapper */
#container {
  max-width: 1130px;
  /* 替换原固定200vh的设置，改为高度自适应+上下限控制，数值可按需调整 */
  min-height: 80vh;
  max-height: 95vh;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  background-color: #000 !important;
  animation: gradient 90s linear 0s infinite;
  background-image: linear-gradient(rgba(245, 246, 252, 0.52), rgb(6 6 6)), url(images/background.png);
  border-radius: 5px;
  overflow-y: auto; /* 兜底配置：极端小屏下如果字号缩到最小值仍溢出，显示滚动条不破坏布局 */
  padding: 1rem;
}

/* 给容器内所有文本设置动态字号+行高 */
#container .container-fluid * {
  /* clamp三个参数：最小字号、动态计算值、最大字号，数值可根据你的视觉需求调整 */
  font-size: clamp(0.75rem, 1.2vh + 0.2rem, 1.1rem);
  line-height: clamp(1.2, 1.5vh + 1, 1.6);
}

该方案会自动随窗口高度调整字号，高度越小字号越小，保证内容不会溢出容器。

方案2：JS动态适配（精准控制可选） #

如果需要更精准的填充效果，要求文本刚好占满容器高度不浪费空间，可以用JS动态计算缩放比例：

function adjustTextSize() {
  const container = document.getElementById('container');
  const contentWrap = container.querySelector('.container-fluid');
  // 先重置字号为初始值计算原始内容高度
  contentWrap.style.fontSize = '1rem';
  // 计算适配比例
  const scale = container.clientHeight / contentWrap.scrollHeight;
  // 限制最小字号，避免过小影响可读性
  const finalSize = Math.max(0.75, scale * 1) + 'rem';
  contentWrap.style.fontSize = finalSize;
}

// 页面加载和窗口尺寸变化时触发适配
window.addEventListener('load', adjustTextSize);
window.addEventListener('resize', adjustTextSize);

内容的提问来源于stack exchange，提问作者xMidNight-.