tab-size
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since August 2021.
Thuộc tính tab-size của CSS được dùng để tùy chỉnh độ rộng của ký tự tab (U+0009).
Try it
tab-size: 10px;
tab-size: 16px;
tab-size: 24px;
tab-size: 4;
<section id="default-example">
<pre id="example-element">	123</pre>
</section>
#example-element {
border: 1px solid;
}
Cú pháp
css
/* Giá trị <number> */
tab-size: 4;
tab-size: 0;
/* Giá trị <length> */
tab-size: 10px;
tab-size: 2em;
/* Giá trị toàn cục */
tab-size: inherit;
tab-size: initial;
tab-size: revert;
tab-size: revert-layer;
tab-size: unset;
Giá trị
Định nghĩa chính thức
| Initial value | 8 |
|---|---|
| Applies to | block containers |
| Inherited | yes |
| Computed value | the specified integer or an absolute length |
| Animation type | a length |
Cú pháp chính thức
tab-size =
<number [0,∞]> |
<length [0,∞]>
Ví dụ
Mở rộng theo số lượng ký tự
css
pre {
tab-size: 4; /* Đặt kích thước tab bằng 4 ký tự */
}
Thu nhỏ tab
css
pre {
tab-size: 0; /* Xóa thụt đầu dòng */
}
Kích thước tab mặc định so với kích thước tùy chỉnh
Ví dụ này so sánh kích thước tab mặc định với kích thước tab tùy chỉnh. Lưu ý rằng white-space được đặt thành pre để ngăn các tab bị thu nhỏ.
HTML
html
<p>no tab</p>
<p>	default tab size of 8 characters wide</p>
<p class="custom-number">	custom tab size of 3 characters wide</p>
<p> 3 spaces, equivalent to the custom tab size</p>
<p class="custom-length">	custom tab size of 50px wide</p>
CSS
css
p {
white-space: pre;
}
.custom-number {
tab-size: 3;
}
.custom-length {
tab-size: 50px;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Text Module Level 3 # tab-size-property |