tab-size | CSS

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

tab-size CSS property is used to customize the width of tab characters (U+0009).

句法

/* <integer> 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: unset;

值

<integer>
<length>

形式定义

初始值	`8`
适用于	block containers
继承	yes
计算值	the specified integer or an absolute length
动画类型	a length

形式句法

<integer> | <length>

范例

Expanding by character count

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

Collapse tabs

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

Comparing to the default size

This example compares a default tab size with a custom tab size. Note that white-space is set to pre to prevent the tabs from collapsing.

HTML

<p>no tab</p>
<p>	default tab size of 8 characters wide</p>
<p class="custom">	custom tab size of 3 characters wide</p>
<p>   3 spaces, equivalent to the custom tab size</p>

CSS

p {
  white-space: pre;
}
.custom {
  tab-size: 3;
  -moz-tab-size: 3;
}

结果

规范

规范	状态	注释
CSS Text Module Level 3 The definition of 'tab-size' in that specification.	工作草案	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`tab-size`	Chrome 完整支持 21 注意事项完整支持 21 注意事项注意事项 This property is not yet animatable.	Edge 完整支持 79 注意事项完整支持 79 注意事项注意事项 This property is not yet animatable.	Firefox 完整支持 4 Prefixed 注意事项完整支持 4 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项见 bug 737785 for the status of unprefixing this property. 注意事项 Before Firefox 53, this property was not animatable.	IE 不支持 No	Opera 完整支持 15 完整支持 15 完整支持 10.5 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari 完整支持 6.1	WebView Android 完整支持 4.4	Chrome Android 完整支持 25 注意事项完整支持 25 注意事项注意事项 This property is not yet animatable.	Firefox Android 完整支持 4 Prefixed 注意事项完整支持 4 Prefixed 注意事项 Prefixed Implemented with the vendor prefix: -moz- 注意事项见 bug 737785 for the status of unprefixing this property. 注意事项 Before Firefox 53, this property was not animatable.	Opera Android 完整支持 14 完整支持 14 完整支持 11 Prefixed Prefixed Implemented with the vendor prefix: -o-	Safari iOS 完整支持 7	Samsung Internet Android 完整支持 1.5 注意事项完整支持 1.5 注意事项注意事项 This property is not yet animatable.
`<length>`	Chrome 完整支持 42	Edge 完整支持 79	Firefox 完整支持 53	IE 不支持 No	Opera 完整支持 29	Safari 不支持 No	WebView Android 完整支持 56	Chrome Android 完整支持 42	Firefox Android 完整支持 53	Opera Android 完整支持 29	Safari iOS 不支持 No	Samsung Internet Android 完整支持 4.0

图例

完整支持
不支持
见实现注意事项。
要求使用供应商前缀或不同名称。

另请参阅

Controlling size of a tab character (U+0009) , an email by Anne van Kesteren to the CSSWG.

元数据

最后修改： Aug 8, 2020

CSS
CSS 参考
CSS Text
特性
1. hanging-punctuation
2. hyphens
3. letter-spacing
4. line-break
5. overflow-wrap
6. paint-order
7. tab-size
8. text-align
9. text-align-last
10. text-indent
11. text-justify
12. text-size-adjust
13. text-transform
14. white-space
15. word-break
16. word-spacing

在此页

句法

值