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
|
---
title: overflow
slug: Web/CSS/overflow
translation_of: Web/CSS/overflow
---
<div>{{ CSSRef() }}</div>
<h2 id="Summary" name="Summary">Резюме</h2>
<p>Свойство CSS <code>overflow</code> определяет, необходимо ли для переполненного блочного элемента содержимое обрезать, предоставить полосы прокрутки или просто отобразить.</p>
<p>Использование свойства <code>overflow</code> со значениями, отличными от <code>visible</code>, (значение, принятое по умолчанию), создаёт новый <a href="/en-US/docs/CSS/block_formatting_context" title="CSS/block_formatting_context">блочный контекст форматирования</a>. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута <code>scrollTop</code> для соответствующего HTML-элемента, даже если <code>overflow</code> имеет значение <code>hidden</code>, элемент, возможно, придётся прокрутить.</p>
<p>{{cssinfo}}</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Формат синтаксиса</a>: {{csssyntax("overflow")}}</pre>
<pre>overflow: visible
overflow: hidden
overflow: scroll
overflow: auto
overflow: inherit
</pre>
<h3 id="Values" name="Values">Значения</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>Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.</dd>
</dl>
<h4 id="Mozilla_Extensions" name="Mozilla_Extensions">Расширения Mozilla</h4>
<dl>
<dt><code>-moz-scrollbars-none </code>{{ obsolete_inline() }}</dt>
<dd>Используйте <code>overflow:hidden</code>.</dd>
<dt><code>-moz-scrollbars-horizontal </code>{{ Deprecated_inline() }}</dt>
<dd>Использование {{ Cssxref("overflow-x") }} и {{ Cssxref("overflow-y") }} предпочтительнее.</dd>
<dt><code>-moz-scrollbars-vertical </code>{{ Deprecated_inline() }}</dt>
<dd>Использование {{ Cssxref("overflow-x") }} и {{ Cssxref("overflow-y") }} предпочтительнее.</dd>
<dt>-moz-hidden-unscrollable {{ non-standard_inline() }}</dt>
<dd>Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку XML root элементов и <code><html></code>, <code> <body></code> клавишами со стрелками и колесом мыши.</dd>
</dl>
<h2 id="Examples" name="Examples">Примеры</h2>
<pre class="brush: css">p {
width: 12em;
height: 6em;
border: dotted;
overflow: visible; /* содержимое не обрезается */
}
</pre>
<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (default)<br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<pre>p { overflow: hidden; /* полосы прокрутки не предоставляются */ }
</pre>
<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<pre>p { overflow: scroll; /* всегда показывать полосы прокрутки */ }
</pre>
<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<pre>p { overflow: auto; /* добавить полосы прокрутки, если это необходимо */ }
</pre>
<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<h2 id="Specifications" name="Specifications">Спецификации</h2>
<p> </p>
<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>
<p>Changed syntax to allow one or two keywords instead of only one</p>
</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Box', '#propdef-overflow', '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>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузера</h2>
<p>{{Compat("css.properties.overflow")}} </p>
<h3 id="Firefox_(Gecko)_Notes" name="Firefox_(Gecko)_Notes">Firefox (Gecko) Примечания</h3>
<p>Из-за Firefox 3.6 (Gecko 1.9.2), <code>свойство overflow неверно применяется к элементам</code> table-group (<code><thead></code> , <code><tbody></code> , <code><tfoot></code>). Это поведение будет исправлено в следующих версиях.</p>
<h3 id="Internet_Explorer_Notes" name="Internet_Explorer_Notes">Internet Explorer Примечания</h3>
<p>Internet Explorer 4 - 6 <code>увеличивает элемент с overflow:visible </code>(значение по умолчанию), чтобы заполнить содержимое в нём.<code> height/width </code>действуют подобно<code> min-height/min-width</code>.</p>
<h2 id="See_also" name="See_also">Смотрите также</h2>
<ul>
<li>Связанные свойства CSS: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("overflow-inline")}}, {{Cssxref("overflow-block")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}</li>
</ul>
|
