CSS 實現自適應文本的頭像

Ant-design 中有一個這樣的頭像組件，當字符串較長時，字體大小可以根據頭像寬度自動調整，效果如下

當然，這裏是通過JS根據字符數量自動縮放文本實現的

而現在，僅僅通過 CSS也能達到類似的效果，如下

一、CSS 容器尺寸單位

實現這個效果需要藉助容器尺寸單位。這些單位是跟隨 CSS 容器查詢 [1] 一起出現的，有以下幾種

關於容器查詢，可以參考這篇文章：介紹 2022 最期待且已正式支持的 CSS container 容器查詢 « 張鑫旭 - 鑫空間 - 鑫生活 (zhangxinxu.com)[2]，本文並不涉及具體容器查詢語句

有了這些尺寸單位，可以很輕易的實現文字大小隨着容器尺寸的變化而變化，下面舉個例子

<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]

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

雖然前面實現這樣的效果，但是還不是很優雅，主要是由於容器查詢有諸多的限制

1. 首先，容器查詢只對容器的子元素有效，對本身無效，這樣導致結構有些冗餘

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

可以看到，文字大小依賴於頁面視圖寬度了。所以，如果直接設置在div上，那麼此時cqw參考的容器就不再是本身了，而是繼續向上查找，直到最外層，也就是說cqw查找的對象是最近的父級容器元素，並不包含自身，這個需要多多注意

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

上面的例子中爲啥要創建一份相同的文本呢，原因就是這個，比如在容器盒子本身不設置寬度的情況下，正常的inline-block元素寬度應該是有內部文本決定的，但是設置container-type之後就不行了，完全沒有寬度了，這也就是爲啥前面要通過絕對定位的方式直接設置寬度了

不過這個原因也容易理解：假設這個成立，如果子元素字號發生變化，導致容器寬度發生變化，容器寬度發生變化又會導致字號發生變化，這樣就死循環了，所以不允許這種情況

3. 最後，容器查詢尺寸對應的具體的尺寸，是一種尺寸單位，這樣導致有很多屬性無法應用，比如scale

在上面的例子中，文字大小是通過font-size改變的，其實最好的方式是scale，因爲瀏覽器有最小字號的限制，而scale就沒這個限制了，但是cqw這種單位無法用在scale之上，略微遺憾，如果有一種百分比單位就好了

當然，不嫌麻煩的可以用@container進行精準控制

四、總結一下

以上就是本文全部內容了，主要是利用容器尺寸單位實現了一個自適應文本大小的效果，以及總結了一些容器查詢目前的一些侷限性，下面總結一下

  1. 容器尺寸單位是跟隨 CSS 容器查詢一起出現的新單位，有 cqw、cqh、cqi、cqb、cqmin、cqmax

  2. 容器尺寸單位需要在聲明容器類型的盒子內纔有效，不然會把整個頁面當成容器，等同於 vw、vh

  3. 由於頭像寬度是固定的，無法直接根據文字寬度容器查詢，需要創建一份相同的文本來創建容器查詢條件

  4. 頭像文字越多，字號越小，所以是成反比，可以採用相減的方式

  5. 實現還不是很優雅，HTML 結構比較多，主要是由於容器查詢有諸多的限制

  6. 容器查詢只對容器的子元素有效，對本身無效，這樣導致結構有些冗餘

  7. 容器查詢盒子尺寸本身不能由內部元素所決定，會導致死循環

  8. 容器查詢尺寸對應的具體的尺寸，不支持相對單位，比如百分比

不過，儘管有諸多限制，容器查詢仍然是目前最具價值的新特性之一了，以前很多需要用到的奇技淫巧都可以用新的方式來實現了，這個後面再分享。

參考資料

[1] CSS 容器查詢: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

[2] 介紹 2022 最期待且已正式支持的 CSS container 容器查詢 « 張鑫旭 - 鑫空間 - 鑫生活 (zhangxinxu.com): https://www.zhangxinxu.com/wordpress/2022/09/css-container-rule/

[3] CSS avator (codepen.io): https://codepen.io/xboxyan/pen/qBYeJGY

[4] CSS avator (runjs.work): https://runjs.work/projects/356c14cb1fac48d0

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/kXjP09MCjFLwQBTHoPTP2A

猜你喜歡