如何在动态尺寸的div中最大化字体大小且避免溢出？

纯CSS解决方案（优先推荐） #

如果能提前预估文本的大致行数和每行字符数，可通过clamp()结合容器尺寸计算出合适的最大字体大小，同时保证文本不溢出容器。

示例代码 #

.section {
  width: 50px;
  height: 150px;
  border: 1px solid red;
  padding: 0.2em; /* 预留少量内边距，避免文本贴边 */
  display: flex;
  align-items: center; /* 垂直居中，可选 */
}

.maximal-font-size {
  --line-height: 1.4; /* 自定义行高 */
  --estimated-lines: 5; /* 预估文本行数 */
  --estimated-chars-per-line: 6; /* 预估每行字符数 */
  
  /* 计算最大字体：取高度方向和宽度方向的最小值，同时限制最小/最大值 */
  font-size: clamp(12px, 
    min(
      calc(100% / (var(--line-height) * var(--estimated-lines))), 
      calc(100% / var(--estimated-chars-per-line))
    ), 
    48px
  );
  line-height: var(--line-height);
  text-wrap: pretty; /* 优化换行逻辑，让文本分布更均匀 */
}

<div class="section maximal-font-size">
Lorem Ipsum is simply dummy text.
</div>

说明 #

• clamp() 函数设置字体的最小、理想、最大值，确保在极端尺寸下字体不会过小或过大
• min() 同时考虑容器的宽度和高度限制，取两者中更严格的那个值作为字体大小的上限
• 通过自定义变量--estimated-lines和--estimated-chars-per-line适配不同文本内容，调整这两个值可让字体更贴合容器

如果文本内容完全动态（无法预估行数/字符数），纯CSS很难做到完美适配，此时可结合JavaScript实现精确计算。

JavaScript解决方案（精确适配动态文本） #

通过动态计算文本的实际尺寸，逐步调整字体大小，直到文本刚好填满容器且不溢出。

示例代码 #

.section {
  width: 50px;
  height: 150px;
  border: 1px solid red;
  padding: 0.2em;
  overflow: hidden; /* 临时隐藏溢出，避免调整过程中出现滚动条 */
}

.maximal-font-size {
  font-size: 16px; /* 初始字体大小 */
  line-height: 1.4;
}

<div class="section maximal-font-size" id="textContainer">
Lorem Ipsum is simply dummy text.
</div>

<script>
const container = document.getElementById('textContainer');
const containerWidth = container.offsetWidth;
const containerHeight = container.offsetHeight;

let fontSize = parseInt(window.getComputedStyle(container).fontSize);
let textWidth, textHeight;

// 逐步增大字体，直到文本溢出容器
do {
  fontSize++;
  container.style.fontSize = `${fontSize}px`;
  textWidth = container.scrollWidth;
  textHeight = container.scrollHeight;
} while (textWidth <= containerWidth && textHeight <= containerHeight);

// 回退到最后一个不溢出的字体大小
container.style.fontSize = `${fontSize - 1}px`;
container.style.overflow = 'visible'; // 恢复正常显示
</script>

说明 #

• 通过scrollWidth和scrollHeight获取文本的实际尺寸，与容器尺寸对比
• 循环增大字体直到溢出，再回退一步得到最大适配的字体大小
• 可添加防抖/节流逻辑，在容器尺寸变化时重新计算字体大小

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