pad

Cú pháp

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

Giá trị

Descriptor chấp nhận hai giá trị sau đây, được phân tách bằng khoảng trắng và có thể được chỉ định theo bất kỳ thứ tự nào:

<integer>

Chỉ định độ dài tối thiểu mà tất cả các biểu diễn marker phải đạt. Giá trị phải không âm. Trong trường hợp descriptor pad, giá trị này còn được gọi là độ dài đệm (pad length).

<symbol>

Chỉ định ký hiệu được dùng để đệm nếu độ dài tối thiểu được xác định bởi <integer> chưa đạt được. Trong trường hợp descriptor pad, giá trị này còn được gọi là ký hiệu đệm (padding symbol).

Mô tả

Dùng descriptor pad khi bạn cần biểu diễn marker có độ dài tối thiểu. Nếu biểu diễn marker ngắn hơn độ dài đệm được chỉ định, thì biểu diễn marker sẽ được đệm bằng ký hiệu đệm được chỉ định. Biểu diễn marker dài hơn độ dài đệm sẽ được hiển thị mà không cần đệm thêm.

Descriptor pad nhận một <integer> cho độ dài marker tối thiểu và một <symbol> cho ký hiệu đệm. Trường hợp sử dụng phổ biến của descriptor pad là khi bạn cần một danh sách bắt đầu đánh số từ 01 và tiếp tục qua 02, 03, 04, v.v., thay vì chỉ 1, 2, 3 và 4. Bằng cách chỉ định descriptor pad là pad: 2 "0" trong trường hợp này, trình duyệt đảm bảo bộ đếm có ít nhất hai ký tự và thêm đệm bằng 0 để đạt độ dài tối thiểu hai ký tự khi cần. Các bộ đếm đã có hai ký tự trở lên trong ví dụ này sẽ được hiển thị bình thường, không cần đệm.

Định nghĩa chính thức

Cú pháp chính thức

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

<integer> = 
  <number-token>  

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

Ví dụ

Đệm một bộ đếm

Ví dụ này mở rộng system decimal để tạo một bộ đếm có ít nhất ba ký tự, đệm các bộ đếm ngắn hơn bằng 0 để đạt độ dài tối thiểu đó. Descriptor suffix đã được thêm vào để làm cho kết quả dễ đọc hơn.

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

Kết quả

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• Các descriptor của @counter-style: system, symbols, additive-symbols, negative, prefix, suffix, range, speak-as, fallback
• Các thuộc tính kiểu danh sách: list-style, list-style-image, list-style-position
• Hàm symbols() để tạo kiểu bộ đếm ẩn danh
• Module CSS counter styles
• Module CSS lists and counters