仅用CSS实现容器字体自动适配：单行文本占满容器宽度

可以通过纯CSS实现该需求，以下分两种场景给出具体方案：

静态文本（已知字符数） #

如果文本内容固定，可通过CSS变量结合calc()和clamp()实现精准适配：

• 给容器设置固定宽度，同时用white-space: nowrap强制文本单行显示
• 用CSS变量定义容器宽度、文本字符总数，以及字号的最小/最大值
• 通过计算得出恰好让文本占满容器的字号，同时限制字号范围避免过大或过小

示例代码：

.text-container {
  width: 400px; /* 容器固定宽度 */
  white-space: nowrap;
  overflow: hidden;
  --container-width: 400;
  --char-count: 15; /* 文本的字符总数 */
  --min-font: 16px;
  --max-font: 48px;
  /* 计算字号，确保文本刚好填满容器宽度，同时限制上下限 */
  font-size: clamp(var(--min-font), calc(var(--container-width) / var(--char-count) * 1px), var(--max-font));
}

动态文本（未知字符数） #

纯CSS无法直接获取动态文本的实际长度，因此无法做到100%精准适配，但可以通过视口单位结合clamp()实现近似效果，保证文本在多数场景下单行占满容器：

.text-container {
  width: 80%; /* 容器宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  --estimated-chars: 20; /* 预估文本的大致字符数 */
  /* 基于容器宽度比例调整字号，限制范围 */
  font-size: clamp(1rem, (80vw / var(--estimated-chars)), 5rem);
}

这种方法依赖对文本长度的预估，若实际文本与预估偏差较大，可能出现溢出或未填满的情况。如果需要完全精准适配动态文本，目前仍需配合JavaScript获取文本实际宽度后调整字号。

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