欢迎关注我的公众号：前端侦探经常会遇到字符串补全的需求。一个典型的例子就是时间或者日期的补零操作，比如2021-12-312022-03-03通常方法是if(num<10){num='0'+num}之后，原生补全方法padStart()和padEnd()出现在JS中，如下'3'.padStart(2,'0')//结果为'03''12'.padStart(2,'0')//结果为'12'其实这个效果在CSS中也可以实现，而且解决方案有很多，一起来看看吧，相信你会有不一样的体验1.flex-end对齐先介绍一个比较通俗易懂的解决方案，这也很简单。假设HTML是这样的2-28某些情况下还会设置等宽字体，看起来更协调美观span{font-family:Consolas,Monaco,monospace;}我们需要在数字前生成一个带有伪元素的“0”span::before{content:'0'}接下来，为元素设置固定宽度。由于是等宽字体，可以直接设置为2ch。注意这个ch单位，代表字符0的宽度（有兴趣的可以参考这篇文章：Monospaced字体在web布局和CSS3ch单位中的应用嘿嘿），然后设置右边对齐跨度{/**/显示：inline-flex;宽度：2ch；justify-content:flex-end;}原理很简单，在2如果把3个字符放在一个3个字符宽的空格里，然后靠右对齐，会不会自动把最左边的0挤出来？然后超越隐藏，完整代码如下span::before{content:'0'}span{display:inline-flex;宽度：2ch；证明内容：flex-end；overflow:hidden;}二、动态CSS变量的计算因为CSS无法获取到标签的文本内容，所以这里需要建一个CSS变量来传递，如下2-28通过var(--num)得到变量后，可以进行一系列的逻辑判断，那么，How小于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的值为最小值-1通道。当--num小于10时，假设为5，中间的calc值计算为5ch，clamp的值为最大值0ch所以，最终的表现是，当大于等于10，margin-left为-1ch，小于10时，margin-left为0，完美。完整代码如下span::before{content:'0';不透明度：calc(10-var(--num));左边距：clamp(-1ch,calc((9-var(--num))*1ch),0ch);}3.定义计数器风格，使用计数器来实现这个效果。首先看一下默认的计数器效果。我们需要隐藏原文，使用计数器通过伪元素显示CSS变量。关于这个技巧，可以参考这篇文章：小技巧：如何使用content属性显示CSSvar变量值，如下span::before{counter-reset:numvar(--num);content:counter(num);}接下来需要使用到counter的第二个参数,counterstyle这个是来做什么的？相信大家都用过一个属性list-style-type，和这个类似，可以定义序列的样式，比如list-style-type:lower-latin按照小写英文字母的顺序；这里我们需要一个10以内的自动补码有一个现成的零计数器，叫做decimal-leading-zero，翻译过来就是，decimalleadingzerolist-style-type:decimal-leading-zero;回到这里，需要做的很简单，添加这个参数就可以了，完整代码如下span::before{counter-reset:numvar(--num);content:counter(num,decimal-leading-zero);}效果如下4.上面的counter扩展只适用于2位数字，如果需要3位数字怎么办？比如padStartin001,002,...,010,012,...,098,099,100JS可以指定填入'1'后的位数padStart(3,'0')//结果is'001''99'.padStart(3,'0')//结果为'099''101'.padStart(3,'0')//结果为'101'其实CSS也有这个能力，叫做@counter-style/pad，严格来说，这是官方的补全方案，语法很像pad:3"0";不过这个需要用在自定义计数器上，即@counter-style。有兴趣的可以参考张老师的这篇文章：CSS@counter-style规则详解。这里简单介绍一下用法。假设您定义了一个名为pad-num的计数器，实现方式如下@counter-stylepad-num{system:extendsnumeric;pad:3"0";}语法是这样的：这里的system是“系统”的意思，就是一些内置的计数器，比如这里使用extendsnumeric，后面的numeric表示数字技术系统，前面的extends表示扩展名。基于此，thenpad:3"0"与JS同义，表示不足3位的地方补"0"，然后应用到计数器中：span::before{计数器重置：numvar(--num);content:counter(num,pad-num);}效果如下：当然这个兼容性稍差，根据实际需要，以上完整代码可以访问csspad(codepen.io)5.总结一下以上三种CSS字符串补全方法，你学会了几个小窍门吗？这些方法各有优缺点。比较它们的优缺点：第一种方法非常容易理解，也很容易扩展。如果需要完成3位数，只需要改变整体宽度即可。缺点是它依赖等宽字体。第二种方法方案更符合JS逻辑，更灵活，但缺点是计算比较冗长，同时还要考虑CSS值的容错性。第三个选项是我推荐的。它不需要计算，也不依赖于布局。可能知道的同学不多，而且如果要自定义计数器，兼容性有点差。CSS实现有很多优点，比如更容易维护，几乎不报错，代码更简洁等等，如果你学会了，赶快在你的项目中使用吧。最后，如果觉得对你有好处和帮助，欢迎点赞、收藏、转发???欢迎关注我的公众号：前端大侦探
