pad

Syntax

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

Werte

Der Deskriptor akzeptiert die folgenden zwei Werte, die durch ein Leerzeichen getrennt sind 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. In Bezug auf den pad Deskriptor ist dieser Wert auch als Pad-Länge bekannt.

<symbol>

Gibt das Symbol an, das für das Auffüllen verwendet werden soll, wenn die durch den <integer> definierte Mindestlänge nicht erreicht wird. In Bezug auf den pad Deskriptor ist dieser Wert auch als Auffüllsymbol bekannt.

Beschreibung

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

Der pad Deskriptor nimmt einen <integer> für die Mindestmarkerlänge und ein <symbol> für das Auffüllen. 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 den pad Deskriptor als pad: 2 "0" in diesem Fall angeben, stellt der Browser sicher, dass der Zähler mindestens zwei Zeichen lang ist und fügt dort, wo es notwendig ist, ein Auffüllen mit 0 hinzu, um die Mindestlänge von zwei Zeichen zu erreichen. Zähler, die in diesem Beispiel bereits zwei oder mehr Zeichen lang sind, werden normal, ohne Auffüllen, 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 auffüllt, 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, um anonyme Zählerstile zu erstellen
• CSS-Zählerstile Modul
• CSS-Listen und Zähler Modul