如何让flexbox内的文本始终适配视口大小、无溢出显示？

需求说明 #

需要让文本填满整个浏览器窗口且不超出窗口边界，所有文本全程可见，字体大小可动态调整适配窗口尺寸。

现有实现问题 #

当前基于flexbox的实现代码如下：

CSS代码 #

.textBox {
  display: flex;
  color: white;
  background-color: blue;
  font-size: 10vw;
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh
}

HTML代码 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles/styles-wearer.css">
</head>
<body>
  <div class='textBox'>
    some cool text that is a whole bunch of cool text. we love great text. all the text in the world and i have a great time getting text to be in this place. it is not enough but at least we have some text.
  </div>
</body>
</html>

该方案小窗口下表现正常，但窗口尺寸放大时，字体会随10vw的设置持续放大，最终文本被截断，部分内容不可见。 #

问题根源 #

问题和flexbox尺寸设置无关，容器100vw/100vh的配置本身符合预期。核心问题是字体大小的适配逻辑有缺陷：vw单位仅参考视口宽度计算字号，完全不考虑视口高度和文本实际占用的纵向空间，窗口越宽字号越大，文本总高度很快就会超出100vh的容器范围，最终出现截断。

可落地方案 #

方案1：纯CSS适配（固定文本长度场景适用） #

通过重置默认边距、更换视口单位、增加字号上下限实现基础适配，不需要写JS：

/* 先清除浏览器默认边距，避免容器被挤出视口 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.textBox {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: white;
  background-color: blue;
  /* 用vmin代替vw，字号同时参考视口宽、高中的较小值，避免宽屏时字号过大 */
  /* clamp限制字号最小、自适应、最大值，避免极端尺寸下字号过小/过大 */
  font-size: clamp(1rem, 7vmin, 4.5rem);
  position: absolute;
  inset: 0; /* 等价于top/right/bottom/left:0，无需单独设置宽高 */
  padding: 2rem; /* 增加内边距避免文本贴边 */
  line-height: 1.4; /* 合理行高减少纵向空间浪费 */
  overflow: hidden; /* 溢出兜底 */
}

纯CSS方案仅适配固定长度的文本，如果文本内容会动态变化，还是存在溢出风险，推荐用下面的JS方案。

方案2：JS动态计算（任意场景100%不溢出） #

核心逻辑是监听窗口尺寸变化，自动迭代调整字号，直到文本完全适配容器宽高，不管文本多长、窗口尺寸怎么变都不会截断：
首先修改CSS：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.textBox {
  color: white;
  background-color: blue;
  position: absolute;
  inset: 0;
  padding: 2rem;
  line-height: 1.4;
  font-size: 100px; /* 初始字号设大值，JS会自动缩小到合适尺寸 */
}

然后加入JS逻辑：

const textBox = document.querySelector('.textBox')

// 防抖处理，避免窗口resize时频繁计算卡顿
function debounce(func, delay = 100) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => func.apply(this, args), delay)
  }
}

function adjustFontSize() {
  let fontSize = parseFloat(window.getComputedStyle(textBox).fontSize)
  // 只要内容宽高超出容器范围，就把字号缩小1px，直到完全适配
  while (
    textBox.scrollHeight > textBox.clientHeight ||
    textBox.scrollWidth > textBox.clientWidth
  ) {
    fontSize -= 1
    textBox.style.fontSize = `${fontSize}px`
    if (fontSize <= 12) break // 最小字号兜底，避免缩到无法阅读
  }
}

// 页面加载完成后首次计算
window.addEventListener('load', adjustFontSize)
// 窗口尺寸变化时重新计算适配
window.addEventListener('resize', debounce(adjustFontSize))

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