jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations

Browse source
This commit is contained in:
Ilya Kantor 2015-03-07 19:26:10 +03:00
parent dceccedb58
commit 6ac9e3a500
182 changed files with 275 additions and 324 deletions
Download patch file Download diff file Expand all files Collapse all files

162
8-css-for-js/13-overflow/article.md Normal file
View file

@ -0,0 +1,162 @@
# Свойство "overflow"
Свойство `overflow` управляет тем, как ведёт себя содержимое блочного элемента, если его размер превышает допустимую длину/ширину.
[cut]
Обычно блок увеличивается в размерах при добавлении в него элементов, заключая в себе всех потомков.
Но что, если высота/ширина указаны явно? Тогда блок не может увеличиться, и содержимое "переполняет" блок. Его отображение в этом случае задаётся свойством `overflow`.
Возможные значения
<ul>
<li>`visible` (по умолчанию)</li>
<li>`hidden`</li>
<li>`scroll`</li>
<li>`auto`</li>
</ul>
## visible
Если не ставить `overflow` явно или поставить `visible`, то содержимое отображается за границами блока.
Например:
```html
<!--+ autorun -->
<style>
.overflow {
*!*
/* overflow не задан */
*/!*
width: 200px;
height: 80px;
border: 1px solid black;
}
</style>
<div class="overflow">
visible ЭтотТекстВылезаетСправаЭтотТекстВылезаетСправа
Этот текст вылезает снизу Этот текст вылезает снизу
Этот текст вылезает снизу Этот текст вылезает снизу
</div>
```
Как правило, такое переполнение указывает на ошибку в вёрстке. Если содержимое может быть больше контейнера -- используют другие значения.
## hidden
Переполняющее содержимое не отображается.
```html
<!--+ autorun -->
<style>
.overflow {
*!*
overflow: hidden;
*/!*
width: 200px;
height: 80px;
border: 1px solid black;
}
</style>
<div class="overflow">
hidden ЭтотТекстОбрезанСправаЭтотТекстОбрезанСправа
Этот текст будет обрезан снизу Этот текст будет обрезан снизу
Этот текст будет обрезан снизу Этот текст будет обрезан снизу
</div>
```
Вылезающее за границу содержимое становится недоступно.
Это свойство иногда используют от лени, когда какой-то элемент дизайна немного вылезает за границу, и вместо исправления вёрстки его просто скрывают. Как правило, долго оно не живёт, вёрстку всё равно приходится исправлять.
## auto
При переполнении отображается полоса прокрутки.
```html
<!--+ autorun -->
<style>
.overflow {
*!*
overflow: auto;
*/!*
width: 200px;
height: 100px;
border: 1px solid black;
}
</style>
<div class="overflow">
auto ЭтотТекстДастПрокруткуСправаЭтотТекстДастПрокруткуСправа
Этот текст даст прокрутку снизу Этот текст даст прокрутку снизу
Этот текст даст прокрутку снизу
</div>
```
## scroll
Полоса прокрутки отображается всегда.
```html
<!--+ autorun -->
<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 -->
<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).