files/zh-cn/web/css/tab-size/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

---
title: tab-size
slug: Web/CSS/tab-size
tags:
  - CSS
  - 参考
translation_of: Web/CSS/tab-size
---
<div>{{CSSRef}}{{SeeCompatTable}}</div>

<p>CSS 属性<strong> <code>tab-size</code></strong> 用于自定义制表符 (<code>U+0009</code>) 的宽度。</p>

<pre class="brush:css no-line-numbers">/* &lt;integer&gt; values */
tab-size: 4;
tab-size: 0;

/* &lt;length&gt; values */
tab-size: 10px;
tab-size: 2em;

/* Global values */
tab-size: inherit;
tab-size: initial;
tab-size: unset;
</pre>

<p>{{CSSInfo}}</p>

<h2 id="语法">语法</h2>

<h3 id="值">值</h3>

<dl>
 <dt>{{CSSxRef("&lt;integer&gt;")}}</dt>
 <dd>制表符对应的空格数。必须为非负值。</dd>
 <dt>{{CSSxRef("&lt;length&gt;")}}</dt>
 <dd>制表符的宽度。必须为非负值。</dd>
</dl>

<h3 id="正式语法">正式语法</h3>

<pre class="syntaxbox">{{CSSSyntax}}</pre>

<h2 id="示例">示例</h2>

<pre class="brush: css">pre {
  tab-size: 4; /* 将制表符宽度设为 4 个空格 */
}
</pre>

<pre class="brush: css">pre {
  tab-size: 0; /* 移除缩进效果 */
}
</pre>

<pre class="brush: css">pre {
  tab-size: 2; /* 将制表符宽度设为 2 个空格 */
}
</pre>

<h3 id="在线演示">在线演示</h3>

<p>本示例比较了默认制表符宽度和自定义制表符宽度。注意 {{cssxref("white-space")}} 被设置为 <code>pre</code> 以防止制表符收起。</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;p&gt;no tab&lt;/p&gt;
&lt;p&gt;&amp;#0009;default tab size of 8 spaces&lt;/p&gt;
&lt;p class="custom"&gt;&amp;#0009;custom tab  size of 3 spaces&lt;/p&gt;
&lt;p&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;3 spaces, equivalent to the custom tab size&lt;/p&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">p {
  white-space: pre;
}

.custom {
  -moz-tab-size: 3;
  tab-size: 3;
}</pre>

<h4 id="结果">结果</h4>

<p>{{EmbedLiveSample('Live_sample')}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}}</td>
   <td>{{Spec2('CSS3 Text')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>


<p>{{Compat("css.properties.tab-size")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a class="external" href="https://lists.w3.org/Archives/Public/www-style/2008Dec/0009.html"><cite>Controlling size of a tab character (U+0009)</cite></a>，Anne van Kesteren 发送给 CSSWG 的一封电子邮件。</li>
</ul>