Ant-design 中有一個(gè)這樣的頭像組件，當(dāng)字符串較長(zhǎng)時(shí)，字體大小可以根據(jù)頭像寬度自動(dòng)調(diào)整，效果如下：

當(dāng)然，這里是通過(guò)JS根據(jù)字符數(shù)量自動(dòng)縮放文本實(shí)現(xiàn)的。

而現(xiàn)在，僅僅通過(guò) CSS也能達(dá)到類似的效果，如下：

一起看看吧！

一、CSS 容器尺寸單位

實(shí)現(xiàn)這個(gè)效果需要借助容器尺寸單位。這些單位是跟隨CSS容器查詢[1]一起出現(xiàn)的，有以下幾種。

關(guān)于容器查詢，可以參考這篇文章：介紹2022最期待且已正式支持的CSS container容器查詢 ? 張?chǎng)涡?鑫空間-鑫生活 (zhangxinxu.com)[2]，本文并不涉及具體容器查詢語(yǔ)句。

cqw  容器查詢寬度（Container Query Width）占比。1cqw等于容器寬度的1%。假設(shè)容器寬度是1000px，則此時(shí)1cqw對(duì)應(yīng)的計(jì)算值就是10px。

cqh  容器查詢高度（Container Query Height）占比。1cqh等于容器高度的1%。

cqi  表示容器查詢內(nèi)聯(lián)方向尺寸（Container Query Inline-Size）占比。這個(gè)是邏輯屬性單位，默認(rèn)情況下等同于cqw

cqb  容器查詢塊級(jí)方向尺寸（Container Query Block-Size）占比。同上，默認(rèn)情況下等同于cqh。。

cqmin  容器查詢較小尺寸的（Container Query Min）占比。取 cqw和cqh中較小的一個(gè)。

cqmax  表示容器查詢較大尺寸的（Container Query Min）占比。取 cqw和cqh中較大的一個(gè)。

有了這些尺寸單位，可以很輕易的實(shí)現(xiàn)文字大小隨著容器尺寸的變化而變化，下面舉個(gè)例子：

<div class="con">
  <p class="text">大家好，歡迎關(guān)注前端偵探</p>
</div>

在不聲明容器類型的情況下，cqw等同于vw，也就是相當(dāng)于把整個(gè)頁(yè)面當(dāng)成容器，這里希望將這個(gè)div作為參考對(duì)象，需要提前聲明container-type，如下：

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

效果如下：

這樣就很輕易的實(shí)現(xiàn)了文本縮放效果。

原理很簡(jiǎn)單，怎么應(yīng)用呢？

二、自適應(yīng)文本頭像

再回過(guò)頭來(lái)看看實(shí)際案例，如何讓字體大小根據(jù)頭像寬度自適應(yīng)呢？也就是文字越多，字號(hào)越小。

有一個(gè)比較簡(jiǎn)單的思路就是，文字越多，占據(jù)的寬度越多，然后根據(jù)前面的原理，讓文字大小隨著寬度的變化而變化，只不過(guò)這里是成反比，寬度越寬，字號(hào)越小。

假設(shè)HTML是這樣的。

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

簡(jiǎn)單修飾一下：

.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;
}

效果如下：

現(xiàn)在問(wèn)題來(lái)了，目前外層寬度是固定的，好像沒(méi)辦法根據(jù)文字占據(jù)寬度就行容器查詢，怎么辦呢？

我的思路是這樣的，創(chuàng)建一份一模一樣的文本，讓外層容器（A）寬度由內(nèi)部文本決定，然后將容器盒子（B）的寬度設(shè)置成和（A）一樣，這樣不就完成了容器查詢嗎？

根據(jù)這個(gè)思路，可以將HTML改造成這樣：

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

外層容器 A 的文本可以通過(guò)偽元素生成：

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

這時(shí)外層容器 A ，也就是.avator-inner的尺寸完全由偽元素::before撐開(kāi)，如下：

然后，將容器盒子B，也就是.avator-container設(shè)置成和外層容器 A 一樣，可以采用絕對(duì)定位的方式。

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

這樣，容器盒子就可以跟隨偽元素所占大小自動(dòng)變化了，然后給內(nèi)部文字設(shè)置一個(gè)合適的大小，由于是成反比，所以可以采取相減的方式，如下：

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

效果如下：

再換一下文本，比如4個(gè)字的；

可以看到，文本越多，內(nèi)部文字大小越小，正好是我們需要的效果。

下面把偽元素生成的文本隱藏起來(lái)，就可以得到文章開(kāi)頭的效果了，如下：

需要注意的是，由于是font-size實(shí)現(xiàn)，需要在瀏覽器解除最小字號(hào)限制。

下面是完整代碼：

.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;
}

你也可以訪問(wèn)線上 demo：CSS avator (codepen.io)[3] 或者 CSS avator (runjs.work)[4]。

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

雖然前面實(shí)現(xiàn)這樣的效果，但是還不是很優(yōu)雅，主要是由于容器查詢有諸多的限制。

1. 首先，容器查詢只對(duì)容器的子元素有效，對(duì)本身無(wú)效，這樣導(dǎo)致結(jié)構(gòu)有些冗余。

在上面的例子中，div容器中還包含了一個(gè)p元素，文字大小是設(shè)置在p元素上，看似有些多余，能不能直接設(shè)置在div上呢？這樣就可以省一層標(biāo)簽了。答案是不可以！下面是直接設(shè)置在div上的效果。

可以看到，文字大小依賴于頁(yè)面視圖寬度了。所以，如果直接設(shè)置在div上，那么此時(shí)cqw參考的容器就不再是本身了，而是繼續(xù)向上查找，直到最外層，也就是說(shuō)cqw查找的對(duì)象是最近的父級(jí)容器元素，并不包含自身，這個(gè)需要多多注意。

2. 再者，容器查詢盒子尺寸本身不能由內(nèi)部元素所決定。

上面的例子中為啥要?jiǎng)?chuàng)建一份相同的文本呢，原因就是這個(gè)，比如在容器盒子本身不設(shè)置寬度的情況下，正常的inline-block元素寬度應(yīng)該是有內(nèi)部文本決定的，但是設(shè)置container-type之后就不行了，完全沒(méi)有寬度了，這也就是為啥前面要通過(guò)絕對(duì)定位的方式直接設(shè)置寬度了。

不過(guò)這個(gè)原因也容易理解：假設(shè)這個(gè)成立，如果子元素字號(hào)發(fā)生變化，導(dǎo)致容器寬度發(fā)生變化，容器寬度發(fā)生變化又會(huì)導(dǎo)致字號(hào)發(fā)生變化，這樣就死循環(huán)了，所以不允許這種情況。

3. 最后，容器查詢尺寸對(duì)應(yīng)的具體的尺寸，是一種尺寸單位，這樣導(dǎo)致有很多屬性無(wú)法應(yīng)用，比如scale。

在上面的例子中，文字大小是通過(guò)font-size改變的，其實(shí)最好的方式是scale，因?yàn)闉g覽器有最小字號(hào)的限制，而scale就沒(méi)這個(gè)限制了，但是cqw這種單位無(wú)法用在scale之上，略微遺憾，如果有一種百分比單位就好了。

當(dāng)然，不嫌麻煩的可以用@container進(jìn)行精準(zhǔn)控制。

四、總結(jié)一下

以上就是本文全部?jī)?nèi)容了，主要是利用容器尺寸單位實(shí)現(xiàn)了一個(gè)自適應(yīng)文本大小的效果，以及總結(jié)了一些容器查詢目前的一些局限性，下面總結(jié)一下：

容器尺寸單位是跟隨CSS容器查詢一起出現(xiàn)的新單位，有 cqw、cqh、cqi、cqb、cqmin、cqmax。

容器尺寸單位需要在聲明容器類型的盒子內(nèi)才有效，不然會(huì)把整個(gè)頁(yè)面當(dāng)成容器，等同于 vw、vh。

由于頭像寬度是固定的，無(wú)法直接根據(jù)文字寬度容器查詢，需要?jiǎng)?chuàng)建一份相同的文本來(lái)創(chuàng)建容器查詢條件。

頭像文字越多，字號(hào)越小，所以是成反比，可以采用相減的方式。

實(shí)現(xiàn)還不是很優(yōu)雅，HTML結(jié)構(gòu)比較多，主要是由于容器查詢有諸多的限制。

容器查詢只對(duì)容器的子元素有效，對(duì)本身無(wú)效，這樣導(dǎo)致結(jié)構(gòu)有些冗余。

容器查詢盒子尺寸本身不能由內(nèi)部元素所決定，會(huì)導(dǎo)致死循環(huán)。

容器查詢尺寸對(duì)應(yīng)的具體的尺寸，不支持相對(duì)單位，比如百分比。

不過(guò)，盡管有諸多限制，容器查詢?nèi)匀皇悄壳白罹邇r(jià)值的新特性之一了，以前很多需要用到的奇技淫巧都可以用新的方式來(lái)實(shí)現(xiàn)了，這個(gè)后面再分享。