pad

語法

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 進行填充以達到最小的兩字元長度。在此示例中，已經是兩個或更多字元長的計數器將正常顯示，不帶填充。

正式定義

正式語法

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

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

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

示例

填充計數器

此示例擴充套件了 decimal system，以建立一個至少三個字元長的計數器，用 0 填充較短的計數器以達到該最小長度。已新增 suffix 描述符以使輸出更易讀。

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

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

ul {
  list-style: pad-example;
}

結果

規範

瀏覽器相容性

另見

• @counter-style 描述符：system、symbols、additive-symbols、negative、prefix、suffix、range、speak-as、fallback
• 列表樣式屬性：list-style、list-style-image、list-style-position
• symbols() 函式用於建立匿名計數器樣式
• CSS 計數器樣式模組
• CSS 列表和計數器模組