CSS如何让可变长度文本适配固定尺寸div（仅缩字号不溢出）

针对100px×200px固定尺寸DIV、可变长度文本需完整显示且仅通过缩小字号实现的需求，以下是两种可靠方案：

一、纯CSS方案（优先尝试） #

利用CSS的min()函数结合容器尺寸计算，动态限制字号最大值，确保文本不溢出：

.fixed-box {
  width: 100px;
  height: 200px;
  overflow: hidden;
  word-break: break-all;
  /* 基于容器宽高计算最大字号：可根据字体实际排版调整比例 */
  font-size: min(calc(100px / 10), calc(200px / 15));
  /* 可选：用clamp设置字号范围，避免过小 */
  /* font-size: clamp(8px, min(calc(100px/10), calc(200px/15)), 16px); */
}

说明：比例值（10、15）可根据字体的字符宽度、行高调整，确保文本在容器内换行后刚好适配。

二、JavaScript辅助方案（精准适配） #

通过实时计算文本与容器的尺寸差异，动态调整字号直到文本完全适配：

<div class="fixed-box" id="textBox">这里是长度可变的文本内容</div>

<script>
const textBox = document.getElementById('textBox');
let fontSize = 16; // 初始字号
textBox.style.fontSize = `${fontSize}px`;

// 循环缩小字号至文本不溢出
while (textBox.scrollHeight > textBox.clientHeight || textBox.scrollWidth > textBox.clientWidth) {
  fontSize--;
  textBox.style.fontSize = `${fontSize}px`;
  // 防止字号过小的边界控制
  if (fontSize < 6) break;
}
</script>

<style>
.fixed-box {
  width: 100px;
  height: 200px;
  overflow: hidden;
  word-break: break-all;
}
</style>

这个方案能精准适配任意长度的文本，避免纯CSS的预估误差，同时可调整初始字号和最小字号优化体验。

为什么vw单位不行？
vw是基于视口宽度的单位，和容器固定尺寸无关，无法根据容器的容纳能力动态调整，因此文本过长时仍会溢出。

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