卧靠，这是好东西，CSS text-fit属性简介
内容提要
本文介绍CSS新属性text-fit，用于让文本自动适配容器宽度。通过设置font-size为较小值并配合text-fit: grow，标题可填满整行且不换行。语法支持grow、shrink等缩放类型及per-line、consistent等目标值，实现逐行或整体缩放。作者感叹该属性虽强大但Chrome 150才支持，来得太晚，并已将其应用于博客标题。
延伸解读
text-fit 的适用场景与限制
text-fit 属性主要解决文本自动适配容器宽度的问题，尤其适合标题等不希望换行的场景。但需注意，它目前仅 Chrome 150 支持，其他浏览器尚未实现，因此生产环境使用需谨慎。此外，该属性无法用 JavaScript 轻松模拟，具有不可替代性，但这也意味着其兼容性风险较高。
text-fit 与现有方案的对比
作者此前使用 PHP 动态计算字符数并配合 clamp() 函数实现标题自适应，但存在英文字符宽度不均导致无法充分利用容器宽度的问题。text-fit 属性通过原生支持，能更精确地实现文本填满容器，且无需依赖脚本计算，简化了实现方式。
text-fit 的语法要点
text-fit 语法包含缩放类型（grow、shrink、none）和适配目标（per-line、per-line-all、consistent）。其中，per-line 逐行填满，per-line-all 强制所有行填满，consistent 保持整体字号一致。理解这些值的区别有助于根据需求选择合适的配置。
Q&A
CSS text-fit属性是什么？
text-fit是CSS的一个新属性，用于让文本自动适配容器宽度，通过缩放文本使其填满或适应容器的宽度，避免换行或溢出。
text-fit属性的语法是什么？
text-fit属性的语法为：text-fit: <fit-type> <fit-target>。其中<fit-type>可以是none、grow或shrink，<fit-target>可以是per-line、per-line-all或consistent。
text-fit属性中grow和shrink有什么区别？
grow用于放大文本以填满较短的行或空间，而shrink用于缩小过长的文本以防止溢出。
text-fit属性中per-line、per-line-all和consistent有什么区别？
per-line是逐行单独计算，让每行各自填满容器；per-line-all是所有行共同参与、强制填满，包括最后一行；consistent是整体按统一的缩放比例调整，保持相对一致的字体大小。
text-fit属性目前浏览器支持情况如何？
text-fit属性目前仅在Chrome 150版本中支持，其他浏览器尚未支持。
text-fit属性相比JavaScript有什么优势？
text-fit属性实现的排版效果具有JS不可替代性，即无法使用JavaScript代码轻松模拟其效果，因此它提供了更原生的解决方案。
如何使用text-fit让标题填满整行且不换行？
先设置一个足够小的font-size，例如font-size: 12px，然后设置text-fit: grow，即可让标题正好占满一行容器的宽度且不换行。
