工具应用
前端技术
AI技术
拙见
其他知识
编程知识
纯CSS头像组件内文字自适应
type
status
date
slug
summary
tags
category
icon
password
ant design的头像组件中有一个效果就是会根据头像内文字的数量自动缩放文字大小
![这是Ant Design的效果,很棒](https://i0.hdslb.com/bfs/article/3b0df3369d85b0f52e45c085ad2b5d0830109107.png?t=d832fb6b-715d-4022-94ca-4ae7566094ea)
现在我们有了CSS的容器查询单位(Chrome 105+支持)之后,可以轻松的只使用CSS实现这个效果
为了大家比较方便的测试,这里给出HTML代码,方便直接复制拿去测试,这里使用了CDN上的vue2和UnoCSS的运行时,这只是方便写Demo,原理并不依赖这俩,没有这两个依赖你依旧可以将它用在任何地方。
下面是可以真实运行的代码
Last update: 2022-11-02