検索
ホームページウェブフロントエンドCSSチュートリアル文字列を自動的に補完する魔法の CSS!

この記事では、CSS の使用に関する実践的なヒントを紹介し、CSS で文字列を自動的に補完するいくつかの方法について学びます。

文字列を自動的に補完する魔法の CSS!

文字列補完が必要になることがよくあります。典型的な例は、

2021-12-31
2022-03-03

などの、時刻または日付のゼロ埋め込み操作です。メソッドは

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

です。その後、ネイティブ補完メソッド padStart()padEnd() が次のように JS に登場しました。

&#39;3&#39;.padStart(2, &#39;0&#39;)
// 结果是 ’03‘
&#39;12&#39;.padStart(2, &#39;0&#39;)
// 结果是 ’12‘

実際には、このような効果は CSS でも実現でき、解決策はたくさんあります。以下で見てみましょう。 [推奨学習: css ビデオ チュートリアル ]

1. フレックスエンドの配置

まず、比較的理解しやすい、これも非常にシンプルなソリューションを紹介します。 HTML が次のようなものであると仮定します。

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

通常の状況では、固定幅フォントも設定され、より統一されて美しく見えます

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

文字列を自動的に補完する魔法の CSS!

擬似要素を使用して、数字「0」の前に数字を生成する必要があります。

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

文字列を自動的に補完する魔法の CSS!

次に、要素の固定幅を設定します。固定幅フォントなので、注: この ch 単位は、文字 0 の幅を表します (興味がある場合は、この記事を参照してください: Web レイアウトおよび CSS3 ch ユニットで等幅フォントを適用します (へへへ)、右揃えを設定します

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

文字列を自動的に補完する魔法の CSS!原理は非常に簡単で、3 を入力します。 2 文字幅のスペースに文字を右揃えで配置しますよね? 左端の

0

を自動的に絞り出すだけです?

文字列を自動的に補完する魔法の CSS!完全なコードは次のとおりです

span::before{
  content: &#39;0&#39;
}
span{
  display: inline-flex;
  width: 2ch;
  justify-content: flex-end;
  overflow: hidden;
}

2. CSS 変数の動的計算

The text of 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!具体的なロジックは次のとおりです

    When
  • --num

    は 10 に等しく、透明度の計算値は 0 で、0

  • When
  • -- として直接レンダリングされます。 num

    が 10 より大きい場合、透明度の計算値は です。 --num の場合、負の値 は 0

  • としてレンダリングされます。が 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 とみなされ、中間計算値は

-5ch
    として計算されます、クランプ値は最小値
  • -1ch--num が 10 未満の場合、5 とみなされ、中間計算値は次のようになります。 5ch
  • として計算され、クランプ値は最大値
  • 0ch したがって、最終的な性能は 以上の場合10 までの場合、マージン左は -1ch、10 未満の場合、マージン左は 0
#これはより完璧です

完全なコードは次のとおりです

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

文字列を自動的に補完する魔法の CSS!

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

list-style-type: lower-latin;

文字列を自動的に補完する魔法の CSS!

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

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

文字列を自動的に補完する魔法の CSS!

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

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

效果如下

文字列を自動的に補完する魔法の CSS!

四、计数器的扩展

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

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

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

&#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‘

其实,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);
}

效果如下:

文字列を自動的に補完する魔法の CSS!

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

以上完整代码可以访问:

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

1文字列を自動的に補完する魔法の CSS!

五、总结一下

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

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

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

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

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

(学习视频分享:web前端

以上が文字列を自動的に補完する魔法の CSS!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません