如何仅用CSS实现div内文本随父容器缩小而自适应缩放

我需要让div内的文本随父div缩小而自动缩小，既不溢出容器也不被隐藏。具体场景中，要让“Major”“Minor”“Diminished”这类文本随容器宽度变化自动调整字号，保持右侧字母的网格状对齐。

我知道可以通过JavaScript或SVG的变通方案实现，但更希望仅用CSS完成。之前查阅的旧资料显示纯CSS无法实现，但我想了解当前是否已有可行方案——这是个很基础的需求，或许存在我未知的flex/grid技巧。

我提供了简化版问题代码，目前child2设置了overflow: hidden，导致文本被截断，我想要的是文本自动缩放适配（不换行）。

2013年的相关问题给出了JavaScript及重复媒体查询方案（不够平滑），还有将文本放入SVG实现类似图片缩放的方法，请问是否有合适的flex/grid技巧能解决该问题？

简化代码 #

CSS

.root {
  display: flex;
  justify-content: center;
}
.grandparent {
  background-color: #FFD670;
  width: 80vw;
  height: 80vh;
  padding: 30px
}
.parent {
  background-color: #FF70A6;
  padding: 10px;
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 30px;
}

.child1, .child2, .child3 {
  padding: 5px;
  width: 100%;
  text-align: center;
}

.child1, .child3 {
  background-color: #e07046;
}

.child2 {
  background-color: #5286d9;
  overflow: hidden;
}

HTML

<div class="root">
  <div class="grandparent">
    <div class="parent">
      <div class="child1">
        child1child1child1
      </div>
      <div class="child2">
        child2child2child2
      </div>
      <div class="child3">
        child3child3child3
      </div>
    </div>
  </div>
</div>

目前纯CSS有两个实用方案可实现文本随容器自动缩放，无需依赖JS或SVG，其中可结合flex布局达成需求：

方案1：clamp()+ch单位（推荐） #

利用CSS的clamp()函数设置动态字号，配合ch单位（基于当前字体的“0”字符宽度）精准匹配文本与容器的宽度关系。

修改.child2样式：

.child2 {
  background-color: #5286d9;
  /* 最小字号16px，动态值基于容器宽度计算，最大字号30px */
  font-size: clamp(16px, calc(100% / 8), 30px);
  white-space: nowrap;
}

其中calc(100% / 8)需根据文本长度调整：比如文本有10个字符，可设为calc(100% / 10)，确保文本刚好填满容器宽度且不溢出。

方案2：vw单位+text-size-adjust（适合全屏关联场景） #

若容器宽度与视窗强关联，可直接用vw单位绑定字号，再禁用移动端默认文本缩放避免干扰：

.child2 {
  background-color: #5286d9;
  font-size: 4vw;
  white-space: nowrap;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

此方案缺点是字号完全依赖视窗宽度，与容器直接关联较弱，适合容器宽度等于视窗宽度的场景。

flex/grid的配合说明 #

纯flex或grid布局本身无直接控制文本缩放的属性，但可结合上述动态字号方案实现需求。比如你的flex布局中三个子元素平分宽度，给需要缩放的子元素设置动态字号后，即可让文本自适应容器宽度，同时保持三个子元素的网格对齐。

clamp()函数在现代浏览器中兼容性良好（IE除外），无需兼容旧浏览器时为最优解。

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