欢迎来到我的公众号：前端侦探Ant-design中就有这样一个头像组件。当字符串较长时，可以根据头像的宽度自动调整字体大小。效果如下当然，这里是通过JS根据字符数自动缩放文字来实现的。现在，类似的效果只能通过CSS实现。下面我们一起来看看吧。也可以提前访问在线demo：CSSavator(runjs.work)1.CSSContainerSizeUnits要实现这个效果需要使用containersizeunits。这些单元与CSS容器查询一起出现。容器查询有以下几种类型，可以参考这篇文章：介绍2022年最受期待和官方支持的CSS容器容器查询），本文不涉及具体容器查询语句的比例cqw容器查询宽度（Container查询宽度）。1cqw等于容器宽度的1%。假设容器宽度为1000px，那么1cqw对应的计算值为10px。cqh容器查询高度（ContainerQueryHeight）的比例。1cqh等于容器高度的1%。cqi表示容器查询内联大小（ContainerQueryInline-Size）的比例。这是逻辑属性单元，默认相当于cqwcqb容器查询块级方向大小（ContainerQueryBlock-Size）的比例。同上，默认等于cqhcqmin容器查询较小尺寸（ContainerQueryMin）的比例。取cqw和cqh中较小的cqmax表示容器查询中较大尺寸（ContainerQueryMin）的比例。取cqw和cqh中的较大者。有了这些大小单位，就很容易实现文本大小随容器大小的变化。下面是一个例子
