如何通过CSS/JS实现文本换行时自动调整字号保持文本块高度固定

纯CSS可行性结论 #

纯CSS无法实现该效果，核心原因如下：

• CSS没有提供可以直接检测文本实际折行数的原生能力，现有响应式字号方案（包括clamp()、视口单位、容器查询）只能基于容器/视口尺寸做缩放，无法和文本实际折行数做绑定计算。
• 大家熟知的line-clamp属性作用是固定行数后截断溢出内容，属于正向的行数限制，无法反向根据实际折行动态调整字号，完全不匹配需求。
• CSS的计算函数无法获取文本渲染后的行数这类实时布局变量，自然没法完成「N行则字号为原字号1/N」的规则换算。

JavaScript实现方案 #

结合JavaScript可以100%实现需求，核心逻辑非常简单：先获取文本渲染后的实际折行数，再按照规则换算字号即可，不存在技术难点。

核心实现步骤 #

• 预先给文本容器设定需要保持的恒定总高度、基准字号（即文本为1行时的初始字号），建议搭配固定行高使用，计算精度更高。
• 每次文本内容变化、容器尺寸变化时，先把字号重置为基准字号，通过容器滚动高度和单行高度的比值算出实际折行数。
• 按照「当前字号 = 基准字号 / 实际折行数」的规则设置字号，即可保证不管文本折成几行，总高度始终和预设值一致。

最简实现代码 #

<!-- 固定高度的文本容器 -->
<div class="auto-size-text" style="width: 320px; height: 64px; line-height: 1.2; border: 1px solid #eee;"></div>

<script>
const textContainer = document.querySelector('.auto-size-text')
// 1行状态下的基准字号
const baseFontSize = 32
// 测试文本，可替换为动态内容
const content = '测试文本内容，当文字变多折到第二行时字号自动减半，折到第三行时字号变为原大小的三分之一，始终保持容器总高度不变'

function resizeText() {
  // 重置字号计算真实行数
  textContainer.style.fontSize = `${baseFontSize}px`
  textContainer.textContent = content
  const singleLineHeight = parseFloat(getComputedStyle(textContainer).lineHeight)
  const currentLineCount = Math.round(textContainer.scrollHeight / singleLineHeight)
  // 按规则设置适配后的字号
  textContainer.style.fontSize = `${baseFontSize / currentLineCount}px`
}

// 初始化执行
resizeText()
// 监听窗口尺寸变化自动重算，保证响应式效果
window.addEventListener('resize', resizeText)
</script>

提示：如果你的文本是动态加载/可编辑的，只需要在内容更新后手动调用resizeText()方法即可重新适配。如果需要更精准的效果，也可以在设置字号后二次校验容器高度，做微小的字号微调，抵消不同浏览器渲染的像素级误差。

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