tab-size

tab-size CSS 属性用于自定义制表符字符 (U+0009) 的宽度。

试一试

语法

css

/* <number> values */
tab-size: 4;
tab-size: 0;

/* <length> values */
tab-size: 10px;
tab-size: 2em;

/* Global values */
tab-size: inherit;
tab-size: initial;
tab-size: revert;
tab-size: revert-layer;
tab-size: unset;

值

<number>: 空格字符 (U+0020) 的前进宽度的倍数，用作制表符的宽度。必须是非负数。前进宽度是指光标或打印头在打印下一个字符之前移动的距离。
<length>: 制表符的宽度。必须是非负数。

正式定义

初始值	`8`
应用于	块级容器
继承	是
计算值	指定的整数或绝对长度
动画类型	一个 <length>

正式语法

tab-size = 
  <number [0,∞]>  |
  <length [0,∞]>

示例

按字符数扩展

css

pre {
  tab-size: 4; /* Set tab size to 4 characters wide */
}

折叠制表符

css

pre {
  tab-size: 0; /* Remove indentation */
}

默认制表符大小与自定义大小

此示例比较了默认制表符大小和自定义制表符大小。请注意，white-space 设置为 pre 以防止制表符折叠。

HTML

html

<p>no tab</p>
<p>&#0009;default tab size of 8 characters wide</p>
<p class="custom-number">&#0009;custom tab size of 3 characters wide</p>
<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>
<p class="custom-length">&#0009;custom tab size of 50px wide</p>

CSS

body {
  border: 1px solid red;
  margin: 1rem;
}

css

p {
  white-space: pre;
}

.custom-number {
  tab-size: 3;
}

.custom-length {
  tab-size: 50px;
}

结果

规范

规范
CSS 文本模块级别 3 # tab-size-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

white-space