>  기사  >  웹 프론트엔드  >  자동으로 문자열을 완성하는 마법의 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에 기본 완성 방법이 등장했습니다. code>padStart()와 padEnd()는 다음과 같습니다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
    span::before{
      content: &#39;0&#39;;
      opacity: calc(10 - var(--num));
      margin-left: clamp(-1ch, calc((9 - var(--num)) * 1ch),0ch);
    }
    실제로 이러한 효과는 CSS에서도 얻을 수 있는데, 아래에서 함께 논의해 보겠습니다. 한번 보시면 색다른 경험을 하실 것이라 믿습니다. [추천 학습: css 동영상 튜토리얼]

    1. Flex-end 정렬

  • 먼저 비교적 이해하기 쉬운 솔루션을 소개합니다. 이 솔루션도 매우 간단합니다. .HTML은 이렇다고 가정합니다
span::before{
  counter-reset: num var(--num);
  content: counter(num);
}

일반적인 상황에서는 고정폭 글꼴이 더 조화롭고 아름답게 보이도록 설정됩니다

list-style-type: lower-latin;
자동으로 문자열을 완성하는 마법의 CSS!

숫자 앞에 "0"을 생성하려면 의사 요소를 사용해야 합니다

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

자동으로 문자열을 완성하는 마법의 CSS!자동으로 문자열을 완성하는 마법의 CSS!

다음으로 고정 너비를 설정하세요 요소의 경우 너비가 일정한 글꼴이므로 2ch로 직접 설정할 수 있습니다. 문자의 너비를 나타내는 이 <code>ch 단위에 주의하세요. >0 (관심이 있으시면 다음 기사를 참조하십시오:고정 폭 글꼴은 웹 레이아웃과 CSS3 채널 단위에 적용됩니다 ㅎㅎ

) 그런 다음 올바른 정렬을 설정하세요

span::before{
  counter-reset: num var(--num);
  content: counter(num, decimal-leading-zero);
}
🎜자동으로 문자열을 완성하는 마법의 CSS!🎜🎜원리는 매우 간단합니다. 3번 2자 너비의 공백에 있는 문자를 오른쪽으로 정렬하면 가장 왼쪽의 🎜0🎜을 자동으로 짜내나요? 그렇다면 숨는 것 이상으로 나아가세요🎜🎜자동으로 문자열을 완성하는 마법의 CSS! 🎜🎜완전한 코드는 다음과 같습니다🎜
001、002、...、010、012、...、098、099、100

2. CSS 변수의 동적 계산

🎜CSS는 라벨의 텍스트 내용을 얻을 수 없으므로 CSS 변수 여기에서 transfer를 구성해야 합니다. 다음과 같이 🎜
&#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‘
🎜 var(--num)을 통해 변수를 가져온 후 일련의 논리적 판단을 내릴 수 있습니다. 그럼 자동으로 0을 채우는 방법은 무엇입니까? 10 미만일 때? 🎜🎜마찬가지로 숫자 앞에 "0"을 생성하려면 의사 요소를 사용해야 합니다🎜
pad: 3 "0";
🎜그런 다음 CSS 변수에 따라 의사 요소를 동적으로 숨기면 됩니다. 먼저 다음과 같이 투명도를 설정합니다🎜
@counter-style pad-num {
    system: extends numeric;
    pad: 3 "0";
}
🎜. 효과는 다음과 같습니다🎜🎜자동으로 문자열을 완성하는 마법의 CSS!🎜🎜구체적인 논리는🎜

위 내용은 자동으로 문자열을 완성하는 마법의 CSS!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.cn에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제