填充

基线 2023

新可用

自从 2023 年 9 月，此功能在最新的设备和浏览器版本上运行。此功能可能在较旧的设备或浏览器上无法运行。

的pad描述符@counter-styleat-rule用于设置标记表示的最小长度。

语法

css
pad: 3 "0";
pad: "+" 5;

值

描述符接受以下两个值，它们用空格隔开，可以按任何顺序指定

<integer>

指定所有标记表示必须达到的最小长度。该值必须是非负的。在pad描述符的情况下，该值也称为填充长度。

<symbol>

指定如果未达到由<integer>定义的最小长度，则用于填充的符号。在pad描述符的情况下，该值也称为填充符号。

描述

当需要标记表示具有最小长度时，使用pad描述符。如果标记表示短于指定的填充长度，则标记表示将使用指定的填充符号进行填充。比填充长度更长的标记表示将正常显示，没有任何额外的填充。

pad描述符接受一个<integer>用于最小标记长度，以及一个<symbol>用于填充。pad描述符的一个常见用例是当您需要列表从01开始编号，并一直到02、03、04，等等，而不是只到1、2、3和4。在这种情况下，通过将pad描述符指定为pad: 2 "0"，浏览器将确保计数器至少为两个字符长，并在需要时添加使用0的填充以达到最小两个字符长度。在本例中，已经有两个或更多字符的计数器将正常显示，不会有填充。

正式定义

相关的at-rule@counter-style
初始值0 ""
计算值如指定

正式语法

pad = 
  <integer [0,∞]>  &&
  <symbol>         

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

示例

填充计数器

此示例扩展了decimal system以创建一个至少为三个字符长的计数器，并使用0填充较短的计数器以达到该最小长度。添加了一个suffix描述符以使输出更易读。

HTML

html
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li value="40">Forty</li>
  <li>Forty-one</li>
  <li value="200">Two hundred</li>
  <li value="3000">Three thousand</li>
  <li>and so on</li>
</ul>

CSS

css
@counter-style pad-example {
  system: extends decimal;
  suffix: ": ";
  pad: 3 "0";
}

ul {
  list-style: pad-example;
}

结果

规范

规范
CSS 计数器样式级别 3
# counter-style-pad

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅