CSS 实现自适应文本的头像

作者：@XboxYan
原文：https://segmentfault.com/a/1190000042675552

目录

一、CSS 容器尺寸单位

二、自适应文本头像

三、容器查询的一些局限性

1. 首先，容器查询只对容器的子元素有效，对本身无效，这样导致结构有些冗余

2. 再者，容器查询盒子尺寸本身不能由内部元素所决定

3. 最后，容器查询尺寸对应的具体的尺寸，是一种尺寸单位，这样导致有很多属性无法应用，

四、总结一下

---

Ant-design 中有一个这样的头像组件，当字符串较长时，字体大小可以根据头像宽度自动调整，效果如下 

当然，这里是通过 JS 根据字符数量自动缩放文本实现的 

而现在，仅仅通过 CSS 也能达到类似的效果，一起看看吧。你也可以提前访问线上 demo：CSS avator (runjs.work)

一、CSS 容器尺寸单位

实现这个效果需要借助容器尺寸单位。这些单位是跟随 CSS 容器查询一起出现的，有以下几种

【第2758期】新时代布局新特性 -- 容器查询

关于容器查询，可以参考这篇文章：