首頁  >  文章  >  web前端  >  神奇的CSS,實現自動補全字串!

神奇的CSS,實現自動補全字串!

青灯夜游
青灯夜游轉載
2022-03-24 10:55:263321瀏覽

這篇文章跟大家介紹使用CSS的實用小技巧,了解一下CSS自動補全字串的幾種方法,希望對大家有幫助!

神奇的CSS,實現自動補全字串!

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

2021-12-31
2022-03-03

通常的做法是

if (num < 10) {
  num = &#39;0&#39; + num
}

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

&#39;3&#39;.padStart(2, &#39;0&#39;)
// 结果是 ’03‘
&#39;12&#39;.padStart(2, &#39;0&#39;)
// 结果是 ’12‘

其實呢,在CSS 中也是可以實現這樣的效果的,並且有多種方案,下面一起看看吧,相信能有不一樣的體會。 【建議學習:css影片教學

一、flex-end 對齊

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

<span>2</span>
-
<span>28</span>

一般情況下,也會設定等寬字體,看起來更協調、美觀

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

神奇的CSS,實現自動補全字串!

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

span::before{
  content: &#39;0&#39;
}

神奇的CSS,實現自動補全字串!

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

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

神奇的CSS,實現自動補全字串!

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

神奇的CSS,實現自動補全字串!

完整程式碼如下

span::before{
  content: &#39;0&#39;
}
span{
  display: inline-flex;
  width: 2ch;
  justify-content: flex-end;
  overflow: hidden;
}

二、CSS 變數動態計算

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

<span style="--num:2">2</span>
-
<span style="--num:12">28</span>

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

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

span::before{
  content: &#39;0&#39;
}

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

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

效果如下

神奇的CSS,實現自動補全字串!

具體的邏輯就是

  • --num#等於10 時,透明度的計算值就是0,直接依照0 來渲染

  • #當--num大於10 時,透明度的運算值就是負數值,會依照0 渲染

  • --num小於10 時,透明度的計算值就是大於等於1的值,會依照1 來渲染

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

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

神奇的CSS,實現自動補全字串!

要如何消除這個位置呢?方法有很多,這裡採用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

這樣就比較完美了

神奇的CSS,實現自動補全字串!

完整程式碼如下

span::before{
  content: &#39;0&#39;;
  opacity: calc(10 - var(--num));
  margin-left: clamp(-1ch, calc((9 - var(--num)) * 1ch),0ch);
}

三、定义计数器样式

利用计数器也能实现这一效果,首先看默认的计数器效果,我们需要隐藏原有的文字,利用计数器让 CSS 变量通过伪元素展示出来,关于这个技巧,可以参考这篇文章:小tips: 如何借助content属性显示CSS var变量值,如下

span::before{
  counter-reset: num var(--num);
  content: counter(num);
}

神奇的CSS,實現自動補全字串!

接下来需要用到 counter的第 2 个参数 ,计数器样式。这是干什么的呢?相信大家都用过一个属性 list-style-type,就是和这个相通的,可以定义序列的样式,比如按照小写英文字母的顺序

list-style-type: lower-latin;

神奇的CSS,實現自動補全字串!

这里我们需要一个 10 以内自动补零的计数器,刚好有个现成的,叫做 decimal-leading-zero,翻译过来就是,十进制前置零

list-style-type: decimal-leading-zero;

神奇的CSS,實現自動補全字串!

回到这里,需要做的就很简单了,补上这个参数就行了,完整代码如下

span::before{
  counter-reset: num var(--num);
  content: counter(num, decimal-leading-zero);
}

效果如下

神奇的CSS,實現自動補全字串!

四、计数器的扩展

上面的计数器只适用于2位数的,如果需要 3 位数的怎么办呢? 例如

001、002、...、010、012、...、098、099、100

JS 中的 padStart 可以指定填充后的位数

&#39;1&#39;.padStart(3, &#39;0&#39;)
// 结果是 ’001‘
&#39;99&#39;.padStart(3, &#39;0&#39;)
// 结果是 ’099‘
&#39;101&#39;.padStart(3, &#39;0&#39;)
// 结果是 ’101‘

其实,CSS 中也是有这样的能力的,叫做@counter-style/pad,严格来说,这才是官方的补全方案,语法也非常类似

pad: 3 "0";

但是,这个需要用在自定义计数器上,也就是@counter-style,有兴趣的可以参考张老师的这篇文章:CSS @counter-style规则详细介绍,这里简单介绍一下用法,假设定义一个计数器叫做pad-num,实现如下

@counter-style pad-num {
    system: extends numeric;
    pad: 3 "0";
}

语法是这样的:这里的system表示“系统”,就是内置的一些计数器,比如这里用到了extends numeric,后面的numeric表示数字技术系统,前面的extends表示扩展,以这个为基础,然后pad: 3 "0"就和 JS 的意义一样了,表示不足 3 位的地方补“0”

然后运用到计数器中:

span::before{
  counter-reset: num var(--num);
  content: counter(num, pad-num);
}

效果如下:

神奇的CSS,實現自動補全字串!

当然,这个兼容性略差,根据实际需求即可

以上完整代码可以访问:

https://codepen.io/xboxyan/pen/YzEdbwj

1神奇的CSS,實現自動補全字串!

五、总结一下

以上介绍了3种 CSS 字符串补全方法,是不是又学到了几个小技巧呢?这几个方法各有千秋,比较一下各自优缺点:

  • 第一种方案非常容易理解,也容易扩展,如果需要补全 3 位,只需要改变整体宽度即可,不足之处在于依赖等宽字体。

  • 第二种方案比较符合 JS 逻辑,比较灵活,不足在于计算比较啰嗦,而且还要考虑 CSS 取值的容错性。

  • 第三种方案是我比较推荐的了,无需计算,也不依赖布局,可能知道的同学不多,而且如果要自定义计数器,兼容性有点差。

关于 CSS 实现的优点,有很多,比如更容易维护、几乎不会报错、代码更加简洁等等,如果你学会了,赶紧在项目中用起来吧。

(学习视频分享:web前端

以上是神奇的CSS,實現自動補全字串!的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:juejin.cn。如有侵權,請聯絡admin@php.cn刪除