Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "CSS how to achieve automatic completion of strings", the content is detailed, the steps are clear, the details are handled properly, I hope this "CSS how to achieve automatic completion of strings" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

In many cases, we will encounter the requirement of string completion. A typical example is the zero padding operation in time or date, such as

2021-12-312022-03-03

The usual practice is

If (num

< 10) { num = '0' + num} 后来，JS 中出现了原生的补全方法padStart()和padEnd()，如下 '3'.padStart(2, '0')// 结果是 '03''12'.padStart(2, '0')// 结果是 '12' 其实呢，在 CSS 中也是可以实现这样的效果的，并且有多种方案，下面一起看看吧，相信能有不一样的体会。 一、flex-end 对齐 先介绍一个比较容易理解的方案，也非常简单，假设 HTML 是这样的 2-28 一般情况下，还会设置等宽字体，看起来更加协调、美观 span{ font-family: Consolas, Monaco, monospace;}

We need to generate a "0" with pseudo elements before the number.

Span::before {content:'0'}

Next, set a fixed width for the element. Since it is an equal width font, you can directly set it to 2ch. Note the ch unit, which represents the width of the character 0 (if you are interested, you can refer to this article: the application of equal width fonts in web layout and CSS3 ch units), and then set the right alignment.

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

The principle is very simple. If you put three characters in a 2-character-wide space and align them to the right, will you automatically squeeze out the leftmost zero? And then just go beyond hiding.

The complete code is as follows

Span::before {content:'0'} span {display: inline-flex; width: 2ch; justify-content: flex-end; overflow: hidden;} II. Dynamic calculation of CSS variables

Since CSS cannot get the text content of the tag, you need to build a CSS variable to pass it along, as follows

2-28

After you get the variable through var (--num), you can make a series of logical judgments, so how do you automatically fill in zeros when it is less than 10?

Similarly, we need to generate a "0" with pseudo elements before the number.

Span::before {content:'0'}

Then, you just need to dynamically hide the pseudo element according to the CSS variable. Set the transparency first, as follows

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

The effect is as follows

The specific logic is

When-- num equals 10:00, the calculated value of transparency is 0, which is rendered directly as 0

When-- num is greater than 10:00, the calculated value of transparency is negative and will be rendered as 0

When-- num is less than 10:00, the calculated value of transparency is greater than or equal to 1, which is rendered as 1.

So, the final performance is that it is visible when it is greater than or equal to 10:00 and less than 10.

However, this is still a bit of a problem, transparency does not affect the position of the element, as follows

How to eliminate this position? There are many methods. Margin-left is used here, as follows

Span::before {/ * * / margin-left: clamp (- 1ch, calc ((9-var (--num)) * 1ch), 0ch);}

Clamp is used here, which you can understand as an interval with three values [Min, Val, Max], with minimum and maximum values before and after, and variable values in the middle (note that it is compared with 9 here), so the logic here is

When-- num is greater than or equal to 10:00, suppose it is 15, and the intermediate calc value is calculated as-5ch calc clamp. Take the minimum value-1ch.

When-- num is less than 10:00, it is assumed to be 5, and the intermediate calc value is calculated as 5ch. 0ch is the maximum value.

So, the final result is that margin-left is-1ch when it is greater than or equal to 10:00, and margin-left is 0 when it is less than 10.

It's more perfect.

The complete code is as follows

Span::before {content: '0mm; opacity: calc (10-var (--num)); margin-left: clamp (- 1ch, calc ((9-var (--num)) * 1ch), 0ch);} III. Define counter style

The use of counters can also achieve this effect, first look at the default counter effect, we need to hide the original text, use the counter to let CSS variables displayed through pseudo elements, about this technique, you can refer to this article: tips: how to display the value of CSS var variables with the help of the content attribute, as follows

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

Next you need to use the second parameter of counter, the counter style. What is this for? I believe you have all used an attribute list-style-type, which is similar to this property, which can define the style of the sequence, for example, in the order of lowercase letters.

List-style-type: lower-latin

Here we need a counter that automatically padding zeros within 10, and there happens to be a ready-made one called decimal-leading-zero, which translates to, decimal pre-zero.

List-style-type: decimal-leading-zero

Back here, what you need to do is very simple, just add this parameter, and the complete code is as follows

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

The effect is as follows

IV. Expansion of counters

The above counter is only suitable for 2-digit counters. What if you need 3-digit counters? For example

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

PadStart in JS can specify the number of bits after filling

'1'.padStart (3,' 0') / / result is' 001''99'.padStart (3,'0') / / result is' 099''101'.padStart (3,'0') / / result is' 101'

In fact, CSS also has this ability, called @ counter-style/pad. Strictly speaking, this is the official completion scheme, and the syntax is also very similar.

Pad: 3 "0"

However, this needs to be used on a custom counter, that is, @ counter-style. If you are interested, you can refer to teacher Zhang's article: CSS @ counter-style rules in detail. Here is a brief introduction to usage. Suppose you define a counter called pad-num, which is implemented as follows

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

The syntax goes like this: here system stands for "system", that is, some built-in counters, for example, extends numeric is used here, the latter numeric represents the digital technology system, and the front extends indicates extension, based on this, and then pad: 3 "0" has the same meaning as JS, indicating that less than 3 digits are filled with "0".

And then apply it to the counter:

Span::before {counter-reset: num var (--num); content: counter (num, pad-num);} here, this article "how to achieve automatic completion of strings in CSS" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.