一、从动态font-size标题说起
我博客的每篇文章的标题的font-size都是动态的。
比方说“前端快讯：setHTML()和Element.startViewTransition已支持”这篇文章，可以看到字号明显小（需要PC端查看），如下截图所示：
但若是标题文字内容少的文章，那么标题尺寸就会很大！
例如“CSS新单位dvh、lvmin、vi、cqb等初解”这篇文章。
为何会有这种区别？
因为我不希望标题换行。
标题字号比较大，一旦换行，排版就很丑陋。
于是，我在PHP输出标题的时候，动态计算了字符数，然后进行了动态设置：
前端快讯：setHTML()和Element.startViewTransition已支持
.single-h { font-size: clamp(1.25rem, calc(100cqw / var(--length, 20)), 2.4rem); }
虽然说面前实现了预期的排版效果，但是并不完美。
因为每个英文字符占据的宽度是不一样的，标题使用的并不是等宽字体，导致标题文字并不能充分利用容器宽度。
此需求，一直是我心中的一个刺，扎了自己快10年。
结果，哈哈哈，结果，现在居然有原生了CSS属性可以解决此问题了，哈哈哈！
二、text-fit与容器宽度自动适配
如果希望一段长度不固定，但是范围可控的文字，永远一行显示，同时尽可能填满整行，很简单，两行CSS代码的事情，先设置一个足够小的font-size尺寸。
h2 { font-size: 12px; text-fit: grow; }
此时，标题正好占满一行容器的宽度，绝赞！
语法
语法如下，支持两种类型的关键字值：
text-fit: <fit-type> <fit-target>
其中：
<fit-type>（缩放类型）：none：不进行自动适配。grow：放大文本以填满较短的行或空间。shrink：缩小过长的文本防止溢出。
<fit-target>（适配目标）：per-line：逐行单独计算，让每行各自填满容器。per-line-all：所有行共同参与、强制填满。consistent：整体按统一的缩放比例调整，保持相对一致的字体大小。
案例
<fit-type>类型是很好理解的，毕竟大家都是学过Flex布局的，对flex-grow和flex-shrink属性肯定有所了解。
比较有挑战的是搞懂<fit-target>类型各个值的区别。
一图胜千言。
如果text-fit的属性值是grow per-line，那么，除了最后一行，前面没一行各自填满容器，如下截图所示：
如果是text-fit: grow per-line-all，那么最后一行文案，也会放大到充分利用容器宽度，如下示意图：
如果是text-fit: grow consistent，为了确保每一行的字号大小都一样，整个字号的变化其实并不是很明显，不知道下面的对比图大家能否看出区别。
估计很难看出来，这样吧，直接实操，我直接把Demo嵌入到了博客页面（RSS阅读器会看不到效果），如果您的浏览器版本足够，可以通过选择下面的下拉框，切身感受text-fit的渲染效果。
Pi 是 Mario Zechner（libGDX 作者、OpenClaw 底层 harness）做的极简终端编码代理，87.3k stars，MIT 协议，最新 v0.84.1。核心工具只有 read/write/edit/bash 等六个，没有内置 plan mode、子代理、MCP、权限弹窗——这些全都靠 TypeScript 扩展、skills、提示词模板和包来补齐。它的设计哲学是「适配你的工作流，而不是反过来」。
三、为什么你来得这么晚！
虽然近些年CSS更新了很多文本相关的CSS新特性，但让我眼前一亮的，只有这个 text-fit 属性，因为其实现的排版效果具有JS不可替代性。
也就是无法使用JavaScript代码轻松模拟text-fit 属性所能实现的效果。
可惜啊可惜，特么的来的太晚了，目前仅 Chrome 150版本发布，😭😭😭😭
再加上现在大家都氛围编程了，哪怕特性再逆天，也无法在社区激起一丝波澜。
捶足顿胸，你怎么不早来10年了，哪怕5年也好啊！