162 lines
No EOL
5.8 KiB
Markdown
162 lines
No EOL
5.8 KiB
Markdown
# Свойство "overflow"
|
||
|
||
Свойство `overflow` управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину.
|
||
[cut]
|
||
Обычно блок увеличивается в размерах при добавлении в него элементов, заключая в себе всех потомков.
|
||
|
||
Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое "переполняет" блок. Его отображение в этом случае задаётся свойством `overflow`.
|
||
|
||
Возможные значения
|
||
<ul>
|
||
<li>`visible` (по умолчанию)</li>
|
||
<li>`hidden`</li>
|
||
<li>`scroll`</li>
|
||
<li>`auto`</li>
|
||
</ul>
|
||
|
||
## visible
|
||
|
||
Если не ставить `overflow` явно или поставить `visible`, то содержимое отображается за границами блока.
|
||
|
||
Например:
|
||
|
||
```html
|
||
<!--+ autorun no-beautify -->
|
||
<style>
|
||
.overflow {
|
||
*!*
|
||
/* overflow не задан */
|
||
*/!*
|
||
width: 200px;
|
||
height: 80px;
|
||
border: 1px solid black;
|
||
}
|
||
</style>
|
||
|
||
<div class="overflow">
|
||
visible ЭтотТекстВылезаетСправаЭтотТекстВылезаетСправа
|
||
Этот текст вылезает снизу Этот текст вылезает снизу
|
||
Этот текст вылезает снизу Этот текст вылезает снизу
|
||
</div>
|
||
```
|
||
|
||
Как правило, такое переполнение указывает на ошибку в вёрстке. Если содержимое может быть больше контейнера -- используют другие значения.
|
||
|
||
## hidden
|
||
|
||
Переполняющее содержимое не отображается.
|
||
|
||
```html
|
||
<!--+ autorun no-beautify -->
|
||
<style>
|
||
.overflow {
|
||
*!*
|
||
overflow: hidden;
|
||
*/!*
|
||
width: 200px;
|
||
height: 80px;
|
||
border: 1px solid black;
|
||
}
|
||
</style>
|
||
|
||
<div class="overflow">
|
||
hidden ЭтотТекстОбрезанСправаЭтотТекстОбрезанСправа
|
||
Этот текст будет обрезан снизу Этот текст будет обрезан снизу
|
||
Этот текст будет обрезан снизу Этот текст будет обрезан снизу
|
||
</div>
|
||
```
|
||
|
||
Вылезающее за границу содержимое становится недоступно.
|
||
|
||
Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают. Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.
|
||
|
||
## auto
|
||
|
||
При переполнении отображается полоса прокрутки.
|
||
|
||
```html
|
||
<!--+ autorun no-beautify -->
|
||
<style>
|
||
.overflow {
|
||
*!*
|
||
overflow: auto;
|
||
*/!*
|
||
width: 200px;
|
||
height: 100px;
|
||
border: 1px solid black;
|
||
}
|
||
</style>
|
||
|
||
<div class="overflow">
|
||
auto ЭтотТекстДастПрокруткуСправаЭтотТекстДастПрокруткуСправа
|
||
Этот текст даст прокрутку снизу Этот текст даст прокрутку снизу
|
||
Этот текст даст прокрутку снизу
|
||
</div>
|
||
```
|
||
|
||
## scroll
|
||
|
||
Полоса прокрутки отображается всегда.
|
||
|
||
```html
|
||
<!--+ autorun no-beautify -->
|
||
<style>
|
||
.overflow {
|
||
*!*
|
||
overflow: scroll;
|
||
*/!*
|
||
width: 200px;
|
||
height: 80px;
|
||
border: 1px solid black;
|
||
}
|
||
</style>
|
||
|
||
<div class="overflow">
|
||
scroll
|
||
Переполнения нет.
|
||
</div>
|
||
```
|
||
|
||
То же самое, что `auto`, но полоса прокрутки видна всегда, даже если переполнения нет.
|
||
|
||
## overflow-x, overflow-y
|
||
|
||
Можно указать поведение блока при переполнении по ширине в `overflow-x` и высоте -- в `overflow-y`:
|
||
|
||
```html
|
||
<!--+ autorun no-beautify -->
|
||
<style>
|
||
.overflow {
|
||
*!*
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
*/!*
|
||
width: 200px;
|
||
height: 80px;
|
||
border: 1px solid black;
|
||
}
|
||
</style>
|
||
|
||
<div class="overflow">
|
||
ПоШиринеПолосаПрокруткиAutoПоШиринеПолосаПрокруткиAuto
|
||
Этот текст вылезает снизу Этот текст вылезает снизу
|
||
Этот текст вылезает снизу Этот текст вылезает снизу
|
||
</div>
|
||
```
|
||
|
||
## Итого
|
||
|
||
Свойства `overflow-x/overflow-y` (или оба одновременно: `overflow`) задают поведение контейнера при переполнении:
|
||
|
||
<dl>
|
||
<dt>`visible`</dt>
|
||
<dd>По умолчанию, содержимое вылезает за границы блока.</dd>
|
||
<dt>`hidden`</dt>
|
||
<dd>Переполняющее содержимое невидимо.</dd>
|
||
<dt>`auto`</dt>
|
||
<dd>Полоса прокрутки при переполнении.</dd>
|
||
<dt>`scroll`</dt>
|
||
<dd>Полоса прокрутки всегда.</dd>
|
||
</dl>
|
||
|
||
Кроме того, значение `overflow: auto | hidden` изменяет поведение контейнера, содержащего `float'ы`. Так как элемент с `float` находится вне потока, то обычно контейнер не выделяет под него место. Но если стоит такой `overflow`, то место выделяется, т.е. контейнер растягивается. Более подробно этот вопрос рассмотрен в статье [](/float). |