前端早讀課 - 【第2756期】CSS 也能自動補全字符串？－鑽石舞台

前言

這是用 CSS 對 JS 功能實現了一遍？今日前端早讀課文章由閱文 @XboxYan 授權，公號：前端偵探分享。

@XboxYan，閱文體驗設計部，專注用戶體驗相關，熱愛 CSS，熱愛原生，歡迎關注 github:https://github.com/XboxYan

正文從這開始～～

很多時候都會碰到字符串補全的需求，典型的例子就時間或者日期中的補零操作，例如

2021-12-31 2022-03-03

通常的做法是

if (num < 10) { num = '0' + num }

後來，JS 中出現了原生的補全方法 padStart () 和 padEnd ()，如下

'3'.padStart(2, '0') // 結果是』03『 '12'.padStart(2, '0') // 結果是』12『

其實呢，在 CSS 中也是可以實現這樣的效果的，並且有多種方案，下面一起看看吧，相信能有不一樣的體會

一、flex-end 對齊

先介紹一個比較容易理解的方案，也非常簡單，假設 HTML 是這樣的

2 - 28

一般情況下，還會設置等寬字體，看起來更加協調、美觀

span{ font-family: Consolas, Monaco, monospace; }

我們需要在數字前用偽元素生成一個「0」

接下來，給元素設置一個固定寬度，這裡由於是等寬字體，所以可以直接設置為 2ch，注意這個 ch 單位，它表示字符 0 的寬度（有興趣的可以參考這篇文章：等寬字體在 web 布局中應用以及 CSS3 ch 單位嘿嘿），然後設置右對齊就行了

span{ /**/ display: inline-flex; width: 2ch; justify-content: flex-end; }

原理很簡單，在 2 個字符寬度的空間裡放置 3 個字符，以右對齊的方式，是不是就自動把最左邊的 0 給擠出去了？然後超出隱藏就可以了

完整代碼如下

span::before{ content: '0' } span{ display: inline-flex; width: 2ch; justify-content: flex-end; overflow: hidden; }二、CSS 變量動態計算

由於 CSS 無法獲取標籤的文本內容，所以這裡需要構建一個 CSS 變量傳遞下去，如下

2 - 28

通過var(--num)拿到變量以後，就可以進行一系列的邏輯判斷了，那麼，如何在小於 10 的情況下自動補零呢？

同樣我們需要在數字前用偽元素生成一個「0」

span::before{ content: '0' }

然後，只需要根據 CSS 變量動態隱藏這個偽元素就行了，先設置透明度，如下

span::before{ /**/ opacity: calc(10 - var(--num)); }

效果如下

具體的邏輯就是

當--num等於 10 時，透明度的計算值就是 0，直接按照 0 來渲染

當--num大於 10 時，透明度的計算值就是負數值，會按照 0 來渲染

當--num小於 10 時，透明度的計算值就是大於等於 1 的值，會按照 1 來渲染

所以，最終的表現就是當大於等於 10 時不可見，小於 10 的時候可見

但是，這樣還是有點問題的，透明度不會影響元素的位置，如下

如何消除這個位置呢？方法有很多，這裡採用margin-left的方式，如下

span::before{ /**/ margin-left: clamp(-1ch, calc((9 - var(--num)) * 1ch),0ch)； }

這裡用到了 clamp，你可以理解為一個區間，有 3 個值[Min, Val, Max]，前後分別是最小、最大值，中間是可變值（注意這裡是和 9 比較），所以這裡的邏輯就是

當--num大於等於 10 時，假設為 15，中間 calc 值計算為 -5ch，clamp 取值為最小值 -1ch當--num小於 10 時，假設為 5，中間 calc 值計算為 5ch，clamp 取值為最大值 0ch所以，最終的表現就是當大於等於 10 時margin-left為 - 1ch，小於 10 的時候margin-left為 0

這樣就比較完美了