by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12348
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、从动态font-size标题说起

我博客的每篇文章的标题的font-size都是动态的。

比方说“前端快讯：setHTML()和Element.startViewTransition已支持”这篇文章，可以看到字号明显小（需要PC端查看），如下截图所示：

但若是标题文字内容少的文章，那么标题尺寸就会很大！

例如“CSS新单位dvh、lvmin、vi、cqb等初解”这篇文章。

为何会有这种区别？

因为我不希望标题换行。

标题字号比较大，一旦换行，排版就很丑陋。

于是，我在PHP输出标题的时候，动态计算了字符数，然后进行了动态设置：

<h2 class="single-h" style="--length:30.533333333333">
  前端快讯：setHTML()和Element.startViewTransition已支持
</h2>

.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的渲染效果。

三、为什么你来得这么晚！

虽然近些年CSS更新了很多文本相关的CSS新特性，但让我眼前一亮的，只有这个 text-fit 属性，因为其实现的排版效果具有JS不可替代性。

也就是无法使用JavaScript代码轻松模拟text-fit 属性所能实现的效果。

可惜啊可惜，特么的来的太晚了，目前仅 Chrome 150版本发布，😭😭😭😭

再加上现在大家都氛围编程了，哪怕特性再逆天，也无法在社区激起一丝波澜。

捶足顿胸，你怎么不早来10年了，哪怕5年也好啊！

罢了罢了，自己先玩玩吧，我先把自己博客改造下。

大家有兴趣了，不妨打开控制台，看看我的文章标题是如何设置的。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12348

（本篇完）