Maison  >  Article  >  interface Web  >  CSS magique pour compléter automatiquement les chaînes !

CSS magique pour compléter automatiquement les chaînes !

青灯夜游
青灯夜游avant
2022-03-24 10:55:263321parcourir

Cet article vous présentera des conseils pratiques sur l'utilisation de CSS et découvrira plusieurs méthodes de complétion automatique de chaînes CSS. J'espère qu'il vous sera utile !

CSS magique pour compléter automatiquement les chaînes !

Nous rencontrons souvent le besoin de complétion de chaîne. Un exemple typique est l'opération de remplissage par zéro dans l'heure ou la date, comme

2021-12-31
2022-03-03

La méthode habituelle est

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

Plus tard, la complétion native est apparue dans JS Les méthodes complètes. padStart() et padEnd() sont les suivantspadStart()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 magique pour compléter automatiquement les chaînes !

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

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

CSS magique pour compléter automatiquement les chaînes !

接下来,给元素设置一个固定宽度,这里由于是等宽字体,所以可以直接设置为2ch,注意这个ch单位,它表示字符0的宽度(有兴趣的可以参考这篇文章:等宽字体在web布局中应用以及CSS3 ch单位嘿嘿),然后设置右对齐就行了

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

CSS magique pour compléter automatiquement les chaînes !

原理很简单,在 2 个字符宽度的空间里放置 3 个字符,以右对齐的方式,是不是就自动把最左边的 0 给挤出去了?然后超出隐藏就可以了

CSS magique pour compléter automatiquement les chaînes !

完整代码如下

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 magique pour compléter automatiquement les chaînes !

具体的逻辑就是

  • --num等于 10 时,透明度的计算值就是 0,直接按照 0 来渲染

  • --num大于 10 时,透明度的计算值就是负数值,会按照 0 来渲染

  • --num小于 10 时,透明度的计算值就是大于等于1的值,会按照 1 来渲染

所以,最终的表现就是当大于等于10时不可见,小于10的时候可见

但是,这样还是有点问题的,透明度不会影响元素的位置,如下

CSS magique pour compléter automatiquement les chaînes !

如何消除这个位置呢?方法有很多,这里采用 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: &#39;0&#39;;
      opacity: calc(10 - var(--num));
      margin-left: clamp(-1ch, calc((9 - var(--num)) * 1ch),0ch);
    }
    En fait, un tel effet peut également être obtenu en CSS, et il existe de nombreuses solutions. Discutons-en ensemble. ci-dessous Jetez un œil, je pense que vous vivrez une expérience différente. [Apprentissage recommandé : Tutoriel vidéo CSS]

    1. Alignement des extrémités flexibles

  • Introduisez d'abord une solution relativement facile à comprendre, qui est également très simple. . Supposons que le HTML soit comme ça
span::before{
  counter-reset: num var(--num);
  content: counter(num);
}

Dans des circonstances normales, une police à largeur fixe sera également définie pour paraître plus coordonnée et plus belle

list-style-type: lower-latin;
CSS magique pour compléter automatiquement les chaînes !

Nous devons utiliser un pseudo-élément pour générer un "0" avant le nombre

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

CSS magique pour compléter automatiquement les chaînes !CSS magique pour compléter automatiquement les chaînes !

Ensuite, définissez un width pour l'élément, puisqu'il s'agit d'une police à largeur constante, elle peut donc être directement définie sur 2ch. Faites attention à cette unité ch, qui représente la largeur du caractère <. code>0 (si vous êtes intéressé, veuillez vous référer à cet article :La police monospace est appliquée dans la mise en page Web et l'unité CSS3 ch hehe

), puis définissez l'alignement à droite

span::before{
  counter-reset: num var(--num);
  content: counter(num, decimal-leading-zero);
}
🎜CSS magique pour compléter automatiquement les chaînes !🎜🎜Le principe est très simple, placez 3 caractères dans un espace de 2 caractères de largeur, alignés à droite, est-ce que cela fait automatiquement ressortir le 🎜0🎜 le plus à gauche ? Alors allez au-delà de la dissimulation🎜🎜CSS magique pour compléter automatiquement les chaînes ! 🎜🎜Le code complet est le suivant🎜
001、002、...、010、012、...、098、099、100

2. Calcul dynamique des variables CSS

🎜Comme CSS ne peut pas obtenir le contenu textuel de l'étiquette, une variable CSS le transfert doit être construit ici Continuez, comme suit🎜
&#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‘
🎜Après avoir obtenu la variable via var(--num), vous pouvez faire une série de jugements logiques Alors, comment remplir automatiquement des zéros. quand il est moins de 10 ? 🎜🎜De même, nous devons utiliser un pseudo-élément pour générer un "0" avant le nombre🎜
pad: 3 "0";
🎜Ensuite, il nous suffit de masquer dynamiquement le pseudo-élément en fonction de la variable CSS. Définissez d'abord la transparence, comme suit🎜
@counter-style pad-num {
    system: extends numeric;
    pad: 3 "0";
}
🎜. L'effet est le suivant🎜🎜CSS magique pour compléter automatiquement les chaînes !🎜🎜La logique spécifique est🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer