如何基于元素文本换行行数，通过CSS动态调整font-size？

纯CSS方案现状 #

目前没有原生CSS特性能直接根据文本的实际换行行数动态调整字号。CSS的条件规则（如媒体查询、容器查询）仅能基于视口或容器尺寸切换样式，无法直接捕获元素内部的文本行数——文本行数是内容长度、字体属性、容器尺寸共同作用的动态结果，不属于CSS可直接感知的状态变量。

最简洁的实现方案 #

若需严格按行数调整字号，目前只能通过JavaScript实现，以下是优化后的简洁方案，可尽可能避免页面闪烁：

实现思路 #

通过计算元素的scrollHeight与行高的比值判断文本行数，再动态切换Tailwind的字号类。

代码示例 #

HTML

<div class="dynamic-text text-5xl overflow-hidden">
  <!-- 动态生成的文本内容 -->
</div>

JavaScript

// 定义调整字号的核心函数
const adjustTextSize = (el) => {
  const computedStyle = getComputedStyle(el);
  const lineHeight = parseFloat(computedStyle.lineHeight);
  const lineCount = Math.round(el.scrollHeight / lineHeight);

  // 移除旧字号类，添加对应类
  el.classList.remove('text-5xl', 'text-4xl', 'text-3xl');
  if (lineCount === 1) el.classList.add('text-5xl');
  else if (lineCount === 2) el.classList.add('text-4xl');
  else el.classList.add('text-3xl');
};

// 初始化应用
document.querySelectorAll('.dynamic-text').forEach(el => {
  adjustTextSize(el);
  el.classList.add('initialized');
});

// 监听窗口 resize，适配容器尺寸变化
window.addEventListener('resize', () => {
  document.querySelectorAll('.dynamic-text').forEach(adjustTextSize);
});

优化闪烁问题 #

在CSS中添加过渡效果，避免初始渲染的闪烁：

.dynamic-text {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.dynamic-text.initialized {
  opacity: 1;
}

近似CSS方案（非严格行数） #

若可接受基于容器尺寸的动态字号（无需严格控制行数），可使用clamp()函数实现无JS的近似效果：

.dynamic-text {
  /* 对应Tailwind text-3xl到text-5xl的字号范围：1.875rem ~ 3rem */
  font-size: clamp(1.875rem, calc(3rem - 2vw), 3rem);
}

该方案会根据容器宽度自动缩放字号，多数场景下能减少换行，但无法精准控制行数。

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