使用 css 视口单位（如 `vw`、`vh`）结合 `overflow: hidden`，可实现响应式字体缩放——字体随容器尺寸动态调整，确保始终不超出 div 边界。

在移动端或响应式布局中，当

推荐使用视口单位（vw / vh）或 clamp() 函数实现智能缩放：

✅ 方案一：vw 基础适配（简洁高效）

.section {
  width: 50px;
  height: 150px;
  border: 1px solid red;
  font-size: 3vw;     /* 字体为视口宽度的 3% —— 屏幕越宽，字越大 */
  overflow: hidden;    /* 防止内容意外溢出（兜底保护） */
  white-space: normal; /* 允许正常换行（默认已启用，显式声明更稳妥） */
  line-height: 1.2;    /* 控制行高，避免多行时纵向溢出 */
}

⚠️ 注意：3vw 是起点值，需根据实际容器宽度调试（例如：若 div 宽仅 50px，而手机视口宽 375px，则 3vw ≈ 11.25px；若需更大字号，可尝试 4vw～6vw，但须在最小/最大设备上实测是否溢出）。

✅ 方案二：clamp() 精准控制（现代推荐 ✅）

.maximal-font-size {
  font-size: clamp(12px, 4.5vw, 28px); /* 最小12px，理想值4.5vw，最大28px */
}

该写法提供三段式弹性：小屏保可读性（不低于 12px），中屏按比例伸缩（4.5vw），大屏防过大（封顶 28px），兼顾可访问性与视觉平衡。

? 关键注意事项：

• vw 基于整个视口宽度，若容器宽度不直接关联视口（如嵌套在 flex/grid 子项中），建议改用 container queries（需现代浏览器支持）或 JS 动态计算（非纯 CSS）；
• 始终搭配 overflow: hidden 和合理 line-height + word-break（如 word-break: break-word）增强鲁棒性；
• 中文/长单词场景建议添加 text-overflow: ellipsis（单行）或 display: -webkit-box（多行截断）作为备选策略。

综上，font-size: clamp(12px, Xvw, Ypx) 是当前最实用、可维护性最强的纯 CSS 解决方案，兼顾响应性、可读性与兼容性（Chrome 84+/Firefox 79+/Safari 14.1+ 支持）。