CSS如何根据字数自动调整字体大小_利用容器查询与CSS变量联动-css教程-PHP中文网

容器查询无法直接按字数响应，因css无字符串函数；可行方案是js测字数并注入css变量驱动字号，或用容器高度变化间接模拟字数档位，但后者受字体、断行等影响大。

css如何根据字数自动调整字体大小_利用容器查询与css变量联动

容器查询（container query）本身不感知文字长度

直接用 @container 根据“字数”响应是行不通的——CSS 没有 length() 这类字符串函数，容器查询只响应容器的尺寸（宽高、内边距等），不读取文本内容或 DOM 文本节点长度。

所谓“根据字数调整字号”，本质是间接策略：把字数差异转化为可测量的布局表现（比如单行溢出、换行次数、容器高度变化），再用容器查询捕获该变化。

纯 CSS 无法获取 textContent.length，JS 才能拿到真实字数
若强行不用 JS，只能依赖「字数 → 行数 → 容器高度 → 容器查询断点」这条脆弱链路
中英文混排、全角/半角、字体度量差异会让高度判断严重失准

可行方案：用 JS 测字数 + CSS 变量驱动字号

这是目前最稳定、可控的方式。核心是把字数作为输入，通过 style.setProperty() 注入 CSS 自定义属性，再由 font-size 动态计算。

示例逻辑：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

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; } /* 明确换行 */
}