如何用纯CSS实现固定宽度div内文本自适应字号？

可以实现接近需求的效果，但纯CSS无法完全精准根据文本长度动态调整字号——因为CSS没有原生能力获取文本的字符数或内容长度。不过有两种方案可以满足大部分场景的需求：

方案一：纯CSS近似实现（允许文本换行） #

通过clamp()函数设置字号的范围，结合容器宽度估算字符承载量，让内容少时用大字号，内容增多时自动缩小到适配宽度：

<div class="text-container">
  这里是用户输入的任意长度文本
</div>

.text-container {
  width: 400px;
  padding: 10px;
  border: 1px solid #eee; /* 方便查看容器范围 */
  /* 字号范围：最小1rem（保证可读性），最大3rem（内容少时的大字号），中间值按每行15个字符估算 */
  font-size: clamp(1rem, calc(400px / 15), 3rem);
  line-height: 1.2;
  overflow: hidden; /* 防止极端长文本溢出 */
}

• 当文本内容较少（每行字符远少于15），字号会取最大值3rem；
• 内容增多需要多行显示时，字号自动降到约26.7px（1.67rem）；
• 文本极长时，字号会降到最小1rem，确保所有内容都能在容器内换行显示。

方案二：单行文本精准自适应（需1行原生JS，无需jQuery） #

如果要求文本单行显示、不换行，纯CSS无法单独完成，但仅需一行原生JS即可实现精准适配，完全不用jQuery：

<div class="text-container">
  这里是用户输入的任意长度文本
</div>

.text-container {
  width: 400px;
  padding: 10px;
  border: 1px solid #eee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 可选，超长时显示省略号 */
  /* 根据字符数动态计算字号，范围限制在1rem到3rem之间 */
  font-size: clamp(1rem, calc(400px / var(--char-count)), 3rem);
}

// 仅需这一行代码，设置文本字符数的自定义属性
document.querySelector('.text-container').style.setProperty('--char-count', document.querySelector('.text-container').textContent.length);

这个方案会根据文本的实际字符数动态计算字号，确保单行文本刚好适配400px宽度，内容越少字号越大，内容越多字号越小，直到达到最小字号限制。

内容的提问来源于stack exchange，提问作者Islam Y-