この記事では、CSS の使用に関する実践的なヒントを紹介し、CSS で文字列を自動的に補完するいくつかの方法について学びます。
文字列補完が必要になることがよくあります。典型的な例は、
2021-12-31 2022-03-03
などの、時刻または日付のゼロ埋め込み操作です。メソッドは
if (num < 10) { num = '0' + num }
です。その後、ネイティブ補完メソッド padStart()
と padEnd()
が次のように JS に登場しました。
'3'.padStart(2, '0') // 结果是 ’03‘ '12'.padStart(2, '0') // 结果是 ’12‘
実際には、このような効果は CSS でも実現でき、解決策はたくさんあります。以下で見てみましょう。 [推奨学習: css ビデオ チュートリアル ]
1. フレックスエンドの配置
まず、比較的理解しやすい、これも非常にシンプルなソリューションを紹介します。 HTML が次のようなものであると仮定します。
<span>2</span> - <span>28</span>
通常の状況では、固定幅フォントも設定され、より統一されて美しく見えます
span{ font-family: Consolas, Monaco, monospace; }
擬似要素を使用して、数字「0」の前に数字を生成する必要があります。
span::before{ content: '0' }
次に、要素の固定幅を設定します。固定幅フォントなので、注: この ch
単位は、文字 0
の幅を表します (興味がある場合は、この記事を参照してください: Web レイアウトおよび CSS3 ch ユニットで等幅フォントを適用します (へへへ
)、右揃えを設定します span{
/**/
display: inline-flex;
width: 2ch;
justify-content: flex-end;
}
原理は非常に簡単で、3 を入力します。 2 文字幅のスペースに文字を右揃えで配置しますよね? 左端の
を自動的に絞り出すだけです?
完全なコードは次のとおりです
span::before{ content: '0' } 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: '0' }
その後、CSS 変数に従って擬似要素を動的に非表示にするだけです。透明度は次のとおりです
span::before{ /**/ opacity: calc(10 - var(--num)); }
効果は次のとおりです
具体的なロジックは次のとおりです
- When
- --num
は 10 に等しく、透明度の計算値は
0
で、0 When - -- として直接レンダリングされます。 num
が 10 より大きい場合、透明度の計算値は
です。
--num の場合、負の値 は 0 としてレンダリングされます。が 10 未満の場合、透明度の計算値は
以上です。 1
の値は 1 としてレンダリングされます。つまり、最終的なパフォーマンスは
#ただし、これにはまだ問題があります。透明度は要素の位置に影響しません。以下
このポジションを排除するにはどうすればよいですか?多くの方法がありますが、ここでは次のように margin-left
span::before{ /**/ margin-left: clamp(-1ch, calc((9 - var(--num)) * 1ch),0ch); }
clamp が使用されています。3 つの値を持つ間隔として理解できます。 [Min, Val, Max]、前と後ろはそれぞれ最小値と最大値、真ん中は変数値(9と比較されることに注意)なので、ここでのロジックは次のとおりです##の場合 ##--num
が 10 以上の場合、15 とみなされ、中間計算値は
- として計算されます、クランプ値は最小値
- -1ch
--num が 10 未満の場合、5 とみなされ、中間計算値は次のようになります。 5ch
として計算され、クランプ値は最大値 - 0ch
したがって、最終的な性能は 以上の場合10 までの場合、マージン左は -1ch、10 未満の場合、マージン左は 0
完全なコードは次のとおりです
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前端)
以上が文字列を自動的に補完する魔法の CSS!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

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

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

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

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

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

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


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境

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