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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
|
---
title: overflow
slug: Web/CSS/overflow
tags:
- CSS
- CSS Box Model
- CSS Property
- CSS_参考
- Layout
- NeedsEditorialReview
- NeedsTechnicalReview
- NeedsUpdate
- overflow
- 'overflow: scroll;'
translation_of: Web/CSS/overflow
---
<p>{{ CSSRef() }}</p>
<p>CSS属性<strong> overflow </strong>定义当一个元素的内容太大而无法适应 <a href="/zh-CN/docs/CSS/block_formatting_context">块级格式化上下文</a> 时候该做什么。它是 {{cssxref("overflow-x")}} 和{{cssxref("overflow-y")}}的 <a href="/zh-CN/docs/Web/CSS/Shorthand_properties">简写属性 </a>。</p>
<div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div>
<p>这个选项包含剪切，显示滚动条，或者显示 从容器溢出到周围区域的内容。</p>
<p>指定除<code>visible</code>(默认值)以外的值将创建一个新的 <a href="/zh-CN/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">块级格式化上下文</a>. 这在技术层面上是必须的——如果一个浮动元素和滚动条相交，它会在每个滚动步骤后强行重新包装内容，从而导致慢滚动体验。</p>
<p>为使 <code>overflow </code>有效果，块级容器必须有一个指定的高度（<code>height</code>或者<code>max-height</code>）或者将<code>white-space</code>设置为<code>nowrap</code>。</p>
<div class="note">
<p><strong>注意:</strong> 设置一个轴为<code>visible</code>（默认值），同时设置另一个轴为不同的值，会导致设置<code>visible</code>的轴的行为会变成<code>auto</code>。 </p>
</div>
<div class="note">
<p><strong>注意</strong>: 即使将overflow设置为hidden，也可以使用JavaScript {{domxref("Element.scrollTop")}} 属性来滚动HTML元素。</p>
</div>
<h2 id="语法" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">语法</h2>
<pre class="brush:css language-css" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">/* 默认值。内容不会被修剪，会呈现在元素框之外 */</span>
<span class="property token" style="color: #990055;">overflow</span><span class="punctuation token" style="color: #999999;">:</span> visible<span class="punctuation token" style="color: #999999;">;</span>
<span class="comment token" style="color: #708090;">/* 内容会被修剪，并且其余内容不可见 */</span>
<span class="property token" style="color: #990055;">overflow</span><span class="punctuation token" style="color: #999999;">:</span> hidden<span class="punctuation token" style="color: #999999;">;</span>
<span class="comment token" style="color: #708090;">/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */</span>
<span class="property token" style="color: #990055;">overflow</span><span class="punctuation token" style="color: #999999;">:</span> scroll<span class="punctuation token" style="color: #999999;">;</span>
<span class="comment token" style="color: #708090;">/* 由浏览器定夺，如果内容被修剪，就会显示滚动条 */</span>
<span class="property token" style="color: #990055;">overflow</span><span class="punctuation token" style="color: #999999;">:</span> auto<span class="punctuation token" style="color: #999999;">;</span>
<span class="comment token" style="color: #708090;">/* 规定从父元素继承overflow属性的值 */</span>
<span class="property token" style="color: #990055;">overflow</span><span class="punctuation token" style="color: #999999;">:</span> inherit<span class="punctuation token" style="color: #999999;">;</span></code>
</pre>
<p> 从下面列表中选出一个或两个关键字来指定<code>overflow</code> 属性。如果指定了两个关键字，第一个关键字应用于<code>overflow-x</code>，第二个关键字应用于<code>overflow-y</code>。否则，<code>overflow-x</code>和<code>overflow-y</code>都设置为相同的值。</p>
<div class="note">
<p><strong>注意</strong>: 在Firefox 63之前，这些值是反向的，第一个值应用于<code>overflow-y</code>，第二个值应用于<code>overflow-x</code>。Firefox 63更新了这个顺序，以匹配对<a href="https://www.fxsitecompat.com/en-CA/docs/2018/overflow-shorthand-syntax-has-been-updated-to-swap-2-values/">规范的更改</a>。此更改是为了匹配使用新逻辑属性<code>overflow-block</code>和<code>overflow-inline</code>时的顺序。</p>
</div>
<pre><code>overflow-x: scroll;
overflow-y: hidden;
/* On Firefox 61 and 62, this is the same as */
overflow: hidden scroll;
/* But on Firefox 63 and later, it will be */
overflow: scroll hidden;</code></pre>
<h3 id="值" style="font-size: 1.71428571428571rem;">值</h3>
<dl>
<dt><code>visible</code></dt>
<dd>默认值。内容不会被修剪，可以呈现在元素框之外。</dd>
<dt><code>hidden</code></dt>
<dd>如果需要，内容将被剪裁以适合填充框。 不提供滚动条。</dd>
<dt><code>scroll</code></dt>
<dd>如果需要，内容将被剪裁以适合填充框。 浏览器显示滚动条，无论是否实际剪切了任何内容。 （这可以防止滚动条在内容更改时出现或消失。）打印机仍可能打印溢出的内容。</dd>
<dt><code>auto</code></dt>
<dd>取决于用户代理。 如果内容适合填充框内部，则它看起来与可见内容相同，但仍会建立新的块格式化上下文。 如果内容溢出，桌面浏览器会提供滚动条。</dd>
<dt><code>overlay</code> {{experimental_inline}} {{deprecated_inline}}</dt>
<dd>行为与<code>auto</code>相同，但滚动条绘制在内容之上而不是占用空间。 仅在基于WebKit（例如，Safari）和基于Blink的（例如，Chrome或Opera）浏览器中受支持。</dd>
</dl>
<h4 id="Mozilla_扩展" style="font-size: 1.28571428571429rem;">Mozilla 扩展</h4>
<dl>
<dt><code>-moz-scrollbars-none </code>{{ obsolete_inline() }}<a href="#Deprecated">[1]</a></dt>
<dd>使用 <code>overflow:hidden</code> 代替.</dd>
<dt><code>-moz-scrollbars-horizontal </code>{{ Deprecated_inline() }}<a href="#Deprecated">[1]</a></dt>
<dd>推荐使用 {{ Cssxref("overflow-x") }} 和 {{ Cssxref("overflow-y") }} .</dd>
<dt><code>-moz-scrollbars-vertical </code>{{ Deprecated_inline() }}<a href="#Deprecated">[1]</a></dt>
<dd>推荐使用 {{ Cssxref("overflow-x") }} 和 {{ Cssxref("overflow-y") }} .</dd>
<dt>-moz-hidden-unscrollable {{ non-standard_inline() }}</dt>
<dd>主要用于内部和主题。禁用 方向键 和 鼠标滚轮 来滚动XML跟元素以及<HTML>和<body>元素。</dd>
<dt>[1] As of Firefox 63, this feature is behind a feature preference setting. In about:config, set <code>layout.css.overflow.moz-scrollbars.enabled</code> to <code>true</code></dt>
</dl>
<h3 id="形式语法" style="font-size: 1.71428571428571rem;">形式语法</h3>
{{csssyntax}}
<h2 id="示例" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">示例</h2>
<pre class="brush: css language-css" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="selector token" style="color: #669900;">p </span><span class="punctuation token" style="color: #999999;">{</span>
<span class="property token" style="color: #990055;">width</span><span class="punctuation token" style="color: #999999;">:</span> 12em<span class="punctuation token" style="color: #999999;">;</span>
<span class="property token" style="color: #990055;">height</span><span class="punctuation token" style="color: #999999;">:</span> 6em<span class="punctuation token" style="color: #999999;">;</span>
<span class="property token" style="color: #990055;">border</span><span class="punctuation token" style="color: #999999;">:</span> dotted<span class="punctuation token" style="color: #999999;">;</span>
<span class="property token" style="color: #990055;">overflow</span><span class="punctuation token" style="color: #999999;">:</span> visible<span class="punctuation token" style="color: #999999;">;</span> <span class="comment token" style="color: #708090;">/* 内容不会被修剪 */</span>
<span class="punctuation token" style="color: #999999;">}</span></code></pre>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 19px; background: 0px 0px;"></div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"></div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"></div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"></div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 95px; background: 0px 0px;"></div>
<p style="border-style: dotted; border-width: initial; overflow: visible; display: inline-block; width: 12em; height: 6em;"><code>visible</code> (default)<br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="selector token" style="color: #669900;">p</span></code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> { </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="property token" style="color: #990055;">overflow</span></code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">: hidden; </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">/* 不显示滚动条 */</span> </code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> }</code></pre>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
<p style="border-style: dotted; border-width: initial; overflow: hidden; display: inline-block; width: 12em; height: 6em;"><code>overflow: hidden</code><br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<pre><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="selector token" style="color: #669900;"> p</span></code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> { </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="property token" style="color: #990055;">overflow</span></code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">: scroll; </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">/* 始终显示滚动条 */</span> </code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> }</code></pre>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
<p style="border-style: dotted; border-width: initial; overflow: scroll; display: inline-block; width: 12em; height: 6em;"><code>overflow: scroll</code><br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<pre class="language-html" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal;"><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="selector token" style="color: #669900;">p</span></code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> { </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="property token" style="color: #990055;">overflow</span></code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;">: auto; </code><code class="language-css" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"><span class="comment token" style="color: #708090;">/* 必要时显示滚动条 */</span> </code><code class="language-html" style="font-family: Consolas, Monaco, 'Andale Mono', monospace; direction: ltr; white-space: pre;"> }</code></pre>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 0px; background: 0px 0px;"></div>
<p style="border-style: dotted; border-width: initial; overflow: auto; display: inline-block; width: 12em; height: 6em;"><code>overflow: auto</code><br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<h2 id="规范" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">注释</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow') }}</td>
<td>{{ Spec2('CSS3 Overflow') }}</td>
<td></td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Box', '#overflow1', 'overflow') }}</td>
<td>{{ Spec2('CSS3 Box') }}</td>
<td>无变更</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'visufx.html#overflow', 'overflow') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>初始规定</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性" style="margin-bottom: 20px; font-size: 2.14285714285714rem;">浏览器兼容性</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table" style="border-color: transparent;">
<tbody>
<tr>
<th style="line-height: 16px;">Feature</th>
<th style="line-height: 16px;">Chrome</th>
<th style="line-height: 16px;">Firefox (Gecko)</th>
<th style="line-height: 16px;">Internet Explorer</th>
<th style="line-height: 16px;">Opera</th>
<th style="line-height: 16px;">Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop("1") }}[1]</td>
<td>4.0[2]</td>
<td>7.0</td>
<td>1.0 (85)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table" style="border-color: transparent;">
<tbody>
<tr>
<th style="line-height: 16px;">Feature</th>
<th style="line-height: 16px;">Android</th>
<th style="line-height: 16px;">Firefox Mobile (Gecko)</th>
<th style="line-height: 16px;">IE Phone</th>
<th style="line-height: 16px;">Opera Mobile</th>
<th style="line-height: 16px;">Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("1") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<p> [1] Firefox 3.6 (Gecko 1.9.2)中, <code> overflow 属性被错误地应用到表组元素（<thead>,<tbody>,<tfoot>）中。这个错误在之后的版本中被修复。</code> </p>
<p>[2]Internet Explorer 4 － 6 会扩大一个带有<code>overflow:visible 的元素以适应它的内容。此处</code><code> height/width 的<font face="Open Sans, Arial, sans-serif">作用相当于</font></code><code> min-height/min-width</code>。</p>
<h2 id="See_also">See also</h2>
<ul>
<li>Related CSS properties: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
</ul>
|
