pad

Syntax

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

Werte

Der Deskriptor akzeptiert die folgenden zwei Werte, die durch ein Leerzeichen getrennt und in beliebiger Reihenfolge angegeben werden können:

<integer>

Gibt die Mindestlänge an, die alle Marker-Darstellungen erreichen müssen. Der Wert muss nicht negativ sein. Im Fall des pad Deskriptors ist dieser Wert auch als Pad-Länge bekannt.

<symbol>

Gibt das Symbol an, das für die Auffüllung verwendet wird, wenn die durch den <integer> definierte Mindestlänge nicht erreicht wird. Im Fall des pad Deskriptors ist dieser Wert auch als Auffüllsymbol bekannt.

Beschreibung

Verwenden Sie den pad Deskriptor, wenn die Marker-Darstellungen eine Mindestlänge haben müssen. Wenn eine Marker-Darstellung kürzer als die angegebene Pad-Länge ist, wird die Marker-Darstellung mit dem angegebenen Auffüllsymbol aufgefüllt. Marker-Darstellungen, die länger als die Pad-Länge sind, werden ohne zusätzliche Auffüllung angezeigt.

Der pad Deskriptor verwendet einen <integer> für die Mindestmarker-Länge und ein <symbol> für die Auffüllung. Ein häufiges Anwendungsbeispiel für den pad Deskriptor ist, wenn Sie möchten, dass eine Liste mit 01 beginnt und über 02, 03, 04 usw. fortfährt, anstatt nur 1, 2, 3 und 4. Indem Sie in diesem Fall den pad Deskriptor als pad: 2 "0" angeben, stellt der Browser sicher, dass der Zähler mindestens zwei Zeichen lang ist und fügt eine Auffüllung mit 0 hinzu, um die Mindestlänge von zwei Zeichen zu erreichen, wo erforderlich. Zähler, die in diesem Beispiel bereits zwei oder mehr Zeichen lang sind, werden normal, ohne Auffüllung, angezeigt.

Formale Definition

Formale Syntax

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>  

Beispiele

Einen Zähler auffüllen

Dieses Beispiel erweitert das decimal system, um einen Zähler zu erstellen, der mindestens drei Zeichen lang ist, und kürzere Zähler mit 0 aufzufüllen, um diese Mindestlänge zu erreichen. Ein suffix Deskriptor wurde hinzugefügt, um die Ausgabe lesbarer zu machen.

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;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @counter-style Deskriptoren: system, symbols, additive-symbols, negative, prefix, suffix, range, speak-as, fallback
• Listeneigenschaften: list-style, list-style-image, list-style-position
• symbols() Funktion zur Erstellung anonymer Zählerstile
• CSS-Zählerstile Modul
• CSS-Listen und Zähler Modul