容器查询无法直接按字数响应，因CSS无字符串函数；可行方案是JS测字数并注入CSS变量驱动字号，或用容器高度变化间接模拟字数档位，但后者受字体、断行等影响大。
容器查询（container query）本身不感知文字长度
直接用 @container 根据“字数”响应是行不通的——CSS 没有 length() 这类字符串函数，容器查询只响应容器的尺寸（宽高、内边距等），不读取文本内容或 DOM 文本节点长度。
所谓“根据字数调整字号”，本质是间接策略：把字数差异转化为可测量的布局表现（比如单行溢出、换行次数、容器高度变化），再用容器查询捕获该变化。
- 纯 CSS 无法获取
textContent.length，JS 才能拿到真实字数 - 若强行不用 JS，只能依赖「字数 → 行数 → 容器高度 → 容器查询断点」这条脆弱链路
- 中英文混排、全角/半角、字体度量差异会让高度判断严重失准
可行方案：用 JS 测字数 + CSS 变量驱动字号
这是目前最稳定、可控的方式。核心是把字数作为输入，通过 style.setProperty() 注入 CSS 自定义属性，再由 font-size 动态计算。
示例逻辑：
立即学习“前端免费学习笔记（深入）”；
const el = document.querySelector('.auto-resize');
const len = el.textContent.length;
el.style.setProperty('--char-count', len);
el.style.setProperty('--font-scale', Math.max(0.8, Math.min(1.2, 1.5 - len * 0.02)));CSS 中使用：
.auto-resize {
font-size: calc(var(--base-size, 16px) * var(--font-scale, 1));
}-
--char-count可用于后续媒体查询式条件（如font-size: clamp(...)配合min()/max()函数） - 避免直接用
len做乘法，要加Math.max/Math.min限幅，否则空字符串或超长文本会崩掉字号 - 监听
input或DOMSubtreeModified（注意性能）来更新变量
用容器查询模拟“短/中/长”三档响应（无 JS）
如果坚决不用 JS，可借助 white-space: nowrap + overflow: hidden + 固定宽度容器，让不同字数触发不同换行行为，再用容器高度断点区分档位。
前提：容器设为 container-type: inline-size，并限制最大宽度（如 max-width: 200px）：
.text-box {
container-type: inline-size;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
}
@container (max-height: 1.2em) {
.text-box { font-size: 18px; } /* 单行未溢出 */
}
@container (min-height: 1.3em) and (max-height: 2.4em) {
.text-box { font-size: 14px; } /* 溢出但未换行（靠字体撑高）或刚换一行 */
}
@container (min-height: 2.5em) {
.text-box { font-size: 12px; } /* 明确换行 */
}- 这个方案对字体族敏感：
font-family改变会导致行高、字符宽度偏移，断点失效 - 必须关闭
line-break和word-break干扰，否则中文可能不按字数而是按语义断行 - 移动端视口缩放、用户字号偏好设置（
font-size: medium/large）也会破坏高度阈值
真正要注意的不是字数，是视觉密度与可读性边界
自动调字号容易陷入“字数越少越大”的直觉陷阱。实际体验中，3 字标题和 12 字标题都设成 24px，前者拥挤后者稀疏；而 30 字说明文若缩到 10px，就失去可读性。
- 优先用
clamp()设安全区间：font-size: clamp(14px, 4vw, 20px)，比纯字数映射更鲁棒 - 对标题类文本，按语义分层（
H1~H3）比按字数更合理 - 所有动态字号方案都要在 iOS Safari、Android Chrome 最新两版实机验证，部分旧引擎对
calc()中嵌套 CSS 变量支持不一致
