来了它来了！超强的 CSS 自适应大小文本

发表于 2年以前 | 总阅读数：2329 次

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

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

image-20221021150954102而现在，仅仅通过 CSS也能达到类似的效果，如下

一起看看吧

一、CSS 容器尺寸单位

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

关于容器查询，可以参考这篇文章：介绍2022最期待且已正式支持的CSS container容器查询 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)[2]，本文并不涉及具体容器查询语句

cqw 容器查询宽度（Container Query Width）占比。1cqw等于容器宽度的1%。假设容器宽度是1000px，则此时1cqw对应的计算值就是10px。
cqh 容器查询高度（Container Query Height）占比。1cqh等于容器高度的1%。
cqi 表示容器查询内联方向尺寸（Container Query Inline-Size）占比。这个是逻辑属性单位，默认情况下等同于cqw
cqb 容器查询块级方向尺寸（Container Query Block-Size）占比。同上，默认情况下等同于cqh
cqmin 容器查询较小尺寸的（Container Query Min）占比。取 cqw和cqh中较小的一个
cqmax 表示容器查询较大尺寸的（Container Query Min）占比。取 cqw和cqh中较大的一个

有了这些尺寸单位，可以很轻易的实现文字大小随着容器尺寸的变化而变化，下面举个例子

<div class="con">
  <p class="text">大家好，欢迎关注前端侦探</p>
</div>

在不声明容器类型的情况下，cqw等同于vw，也就是相当于把整个页面当成容器，这里希望将这个div作为参考对象，需要提前声明container-type，如下

.con {
    container-type: inline-size;
}
.text{
  font-size: 10cqw;
}

效果如下

这样就很轻易的实现了文本缩放效果。

原理很简单，怎么应用呢？

二、自适应文本头像

再回过头来看看实际案例，如何让字体大小根据头像宽度自适应呢？也就是文字越多，字号越小。

有一个比较简单的思路就是，文字越多，占据的宽度越多，然后根据前面的原理，让文字大小随着宽度的变化而变化，只不过这里是成反比，宽度越宽，字号越小。

假设HTML是这样的

<div class="avator">
    <span>侦探</span>
</div>

简单修饰一下

.avator{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: bisque;
  color: rgb(250, 84, 28);
  white-space: nowrap;
}

效果如下

现在问题来了，目前外层宽度是固定的，好像没办法根据文字占据宽度就行容器查询，怎么办呢？

我的思路是这样的，创建一份一模一样的文本，让外层容器（A）宽度由内部文本决定，然后将容器盒子（B）的宽度设置成和（A）一样，这样不就完成了容器查询吗？

根据这个思路，可以将HTML改造成这样

<div class="avator">
  <div class="avator-inner" alt="侦探"><!--外层容器A-->
    <div class="avator-container"><!--容器盒子B-->
      <span>侦探</span>
    </div>
  </div>
</div>

外层容器 A 的文本可以通过伪元素生成

.avator-inner::before{
  content: attr(alt);
  font-size: 40px;
}

这时外层容器 A ，也就是.avator-inner的尺寸完全由伪元素::before撑开，如下

然后，将容器盒子B，也就是.avator-container设置成和外层容器 A 一样，可以采用绝对定位的方式

.avator-container {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

这样，容器盒子就可以跟随伪元素所占大小自动变化了，然后给内部文字设置一个合适的大小，由于是成反比，所以可以采取相减的方式，如下

.avator-container span {
  font-size: calc( 24px - 10cqw );
}

效果如下

再换一下文本，比如4个字的

可以看到，文本越多，内部文字大小越小，正好是我们需要的效果

下面把伪元素生成的文本隐藏起来，就可以得到文章开头的效果了，如下

需要注意的是，由于是font-size实现，需要在浏览器解除最小字号限制

下面是完整代码

.avator{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: bisque;
  color: rgb(250, 84, 28);
  white-space: nowrap;
}
.avator-inner{
  position: relative;
}
.avator-inner::before{
  content: attr(alt);
  visibility: hidden;
  font-size: 40px;
}
.avator-container {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avator-container span {
  font-size: calc( 24px - 10cqw );
  overflow: hidden;
  max-width: 40px;
  text-overflow: ellipsis;
}

你也可以访问线上 demo：CSS avator (codepen.io)[3] 或者 CSS avator (runjs.work)[4]