Magisches CSS zum automatischen Vervollständigen von Zeichenfolgen!

In diesem Artikel erhalten Sie praktische Tipps zur Verwendung von CSS und lernen verschiedene Methoden zur automatischen Vervollständigung von Zeichenfolgen durch CSS kennen.

Wir stoßen häufig auf die Notwendigkeit einer String-Vervollständigung. Ein typisches Beispiel ist die Null-Auffülloperation in Zeit oder Datum, wie z. B.

2021-12-31
2022-03-03

Die übliche Methode ist

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

Später erschien die native Vervollständigung in JS. Die vollständigen Methoden padStart() und padEnd() lauten wie folgtpadStart()和padEnd()，如下

'3'.padStart(2, '0')
// 结果是 ’03‘
'12'.padStart(2, '0')
// 结果是 ’12‘

其实呢，在 CSS 中也是可以实现这样的效果的，并且有多种方案，下面一起看看吧，相信能有不一样的体会。【推荐学习：css视频教程】

一、flex-end 对齐

先介绍一个比较容易理解的方案，也非常简单，假设 HTML 是这样的

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

一般情况下，还会设置等宽字体，看起来更加协调、美观

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

我们需要在数字前用伪元素生成一个“0”

span::before{
  content: '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 变量传递下去，如下

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

通过 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

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

  Tatsächlich kann ein solcher Effekt auch in CSS erzielt werden, und es gibt viele Lösungen. Lassen Sie uns sie unten gemeinsam besprechen Werfen Sie einen Blick darauf, ich glaube, Sie werden eine andere Erfahrung machen. [Empfohlenes Lernen: CSS-Video-Tutorial]

  1. Flex-End-Ausrichtung

Stellen Sie zunächst eine relativ leicht verständliche Lösung vor, die auch sehr einfach ist . Gehen Sie davon aus, dass HTML so ist

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

Unter normalen Umständen wird eine Schriftart mit fester Breite so eingestellt, dass sie koordinierter und schöner aussieht

list-style-type: lower-latin;

Wir müssen ein Pseudoelement verwenden, um eine „0“ vor der Zahl zu generieren

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

Als nächstes legen Sie eine feste Breite fest Da es sich bei dem Element um eine Schriftart mit konstanter Breite handelt, kann diese direkt auf 2ch eingestellt werden. Beachten Sie diese ch-Einheit, die die Breite des Zeichens 0 (bei Interesse lesen Sie bitte diesen Artikel:Monospaced-Schriftarten werden in Weblayouts und CSS3-Kanaleinheiten verwendet, hehe

) und dann die richtige Ausrichtung festlegen

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

🎜🎜🎜Das Prinzip ist ganz einfach, Platz 3 Zeichen in einem Abstand von 2 Zeichen Breite, rechtsbündig, wird das ganz linke 🎜0🎜 automatisch herausgedrückt? Dann gehen Sie einfach über das Verstecken hinaus🎜🎜 />🎜🎜Der vollständige Code lautet wie folgt🎜

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

2. Dynamische Berechnung von CSS-Variablen

🎜Da CSS den Textinhalt des Etiketts nicht abrufen kann, ist eine CSS-Variable erforderlich Die Übertragung muss hier wie folgt erstellt werden: 🎜

'1'.padStart(3, '0')
// 结果是 ’001‘
'99'.padStart(3, '0')
// 结果是 ’099‘
'101'.padStart(3, '0')
// 结果是 ’101‘

🎜Nachdem Sie die Variable über var(--num) erhalten haben, können Sie eine Reihe logischer Urteile fällen. So können Sie Nullen automatisch ausfüllen wenn es weniger als 10 ist? 🎜🎜In ähnlicher Weise müssen wir ein Pseudoelement verwenden, um eine „0“ vor der Zahl zu generieren🎜

pad: 3 "0";

🎜Dann müssen wir das Pseudoelement nur entsprechend der CSS-Variablen dynamisch ausblenden. Stellen Sie zunächst die Transparenz wie folgt ein: Der Effekt ist wie folgt🎜🎜🎜🎜Die spezifische Logik ist🎜

• 🎜Wenn --num gleich 10 ist, beträgt der berechnete Wert der Transparenz 🎜0🎜 und wird direkt als 0🎜 gerendert 🎜
• 🎜Wenn --numWenn er größer als 10 ist, ist der berechnete Wert der Transparenz ein 🎜negativer Wert🎜, der als 0 gerendert wird🎜🎜
• 🎜Wenn --num ist kleiner als 10, der berechnete Wert der Transparenz ist 🎜größer oder gleich 1. Der Wert 🎜 wird als 1 gerendert 🎜🎜🎜🎜Die endgültige Leistung ist also 🎜nicht sichtbar, wenn sie vorhanden ist größer oder gleich 10, sichtbar, wenn es kleiner als 10 ist🎜🎜🎜Dies ist jedoch immer noch etwas problematisch, die Transparenz hat keinen Einfluss auf das Element. Die Position ist wie folgt🎜🎜 🎜🎜Wie kann diese Position beseitigt werden? Es gibt viele Methoden. Die Methode margin-left wird hier wie folgt verwendet: 🎜

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

  🎜clamp🎜, man kann es als Intervall verstehen, mit 3 Werten [Min, Val, Max] , die Vorder- und Rückseite sind das Minimum, der Maximalwert und die Mitte ist ein variabler Wert (beachten Sie, dass er mit 9 verglichen wird), daher lautet die Logik hier 🎜
  • Wenn --num größer oder gleich 10 ist, wird ein Wert von 15 angenommen. Der Zwischenwert wird als 🎜-5ch🎜 berechnet und der Klemmwert ist der Mindestwert 🎜-1ch🎜🎜<li>Wenn <code> --num ist kleiner als 10, es wird angenommen, dass es 5 ist, und der Zwischenwert wird als 🎜5ch 🎜 berechnet, der Klemmwert ist der Maximalwert 🎜0ch🎜🎜🎜🎜Die endgültige Leistung ist also 🎜 Wenn er größer oder gleich 10 ist, beträgt der linke Rand -1ch, und wenn er kleiner als 10 ist, beträgt der linke Rand 0🎜🎜🎜Das ist perfekter 🎜🎜🎜🎜🎜Der vollständige Code lautet wie folgt 🎜

    span::before{
      content: '0';
      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);
    }

    

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

    list-style-type: lower-latin;

    

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

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

    

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

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

    效果如下

    

    四、计数器的扩展

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

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

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

    '1'.padStart(3, '0')
    // 结果是 ’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-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);
    }

    效果如下：

    

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

    以上完整代码可以访问：

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

    

    五、总结一下

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

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

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

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

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

    （学习视频分享：web前端）

Das obige ist der detaillierte Inhalt vonMagisches CSS zum automatischen Vervollständigen von Zeichenfolgen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!