CSS无法根据文字长度自动缩放字体，必须用JavaScript监听内容变化并动态计算字号，:empty仅适用于处理空内容场景。
font-size不能直接响应文字长度，必须靠JavaScript介入
CSS本身没有「根据字符数缩放字体」的原生能力。font-size不接受字符串长度作为输入，:empty伪类只能判断元素是否为空，无法读取文本内容长度。所以所谓“用CSS实现”，实际是CSS配合JS做样式控制，:empty只负责兜底空状态——比如隐藏占位符、移除边框或重置字号。
真实可行的JS方案：监听内容变化 + 动态计算字号
核心逻辑是：获取元素textContent长度 → 比对预设阈值 → 用style.fontSize写入计算结果。关键点在于避免重复计算和布局抖动：
- 用
MutationObserver监听文本变化，比轮询高效且精准 - 字号计算建议用线性衰减：
fontSize = Math.max(minSize, baseSize * (maxLen / actualLen))，防止过小（如低于12px） - 固定容器宽高时，优先用
scrollWidth > offsetWidth判断溢出，比单纯看字数更准确（考虑中英文、全角/半角差异） - 给元素加
white-space: nowrap; overflow: hidden;，确保溢出可被scrollWidth捕获
:empty伪类唯一可靠用途：处理空内容场景
当后端返回空字符串、null或仅空白符时，:empty能生效。但注意它不匹配含空格或换行的节点，需先用JS清理：
- 在JS中执行
el.textContent = el.textContent.trim()后再触发观察器 - CSS里写
.label:empty { font-size: 0; visibility: hidden; }或display: none，避免留白占位 - 别指望
:empty识别<br>
，这些都会让伪类失效
容易忽略的兼容与性能陷阱
移动端iOS Safari对scrollWidth在缩放或横屏时有偏差；频繁设置style.fontSize会触发重排。稳妥做法是：
- 加节流：用
requestAnimationFrame批量更新，避免每帧都算 - 降级兜底：先写
font-size: 16px，再用JS覆盖，保证无JS时基础可读 - 避免在
will-change: transform的元素上做字体缩放，某些安卓WebView会渲染错乱
真正难的不是算字号，而是判断「什么时候该缩」——字数？宽度？行数？这得由业务规则定，CSS只管呈现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
