Correctly translated into Russian (#30022)
parent
9a64e1f1e6
commit
1f7a1a6e1f
|
@ -1,74 +1,66 @@
|
|||
---
|
||||
title: Overflow
|
||||
localeTitle: перелив
|
||||
localeTitle: Переполнение
|
||||
---
|
||||
# перелив
|
||||
# Переполнение
|
||||
|
||||
Свойство `overflow` указывает, что произойдет, если содержимое переполняет поле элемента (это свойство работает только для элементов блока с указанной высотой).
|
||||
Свойство `overflow` определяет, что произойдет, если содержимое переполнит поле элемента (это свойство работает только для элементов блока с указанной высотой).
|
||||
|
||||
Это свойство указывает, следует ли клип-контент или добавлять полосы прокрутки, когда содержимое элемента слишком велико, чтобы вписаться в указанную область.
|
||||
Это свойство указывает, следует ли обрезать содержимое или добавить полосы прокрутки, если содержимое элемента слишком велико, чтобы поместиться в указанной области.
|
||||
|
||||
Например, заданный элемент уровня блока ( `<div>` ), установленный на ширину 300 пикселей, содержит изображение шириной 400 пикселей. Изображение будет выходить из div и быть видимым по умолчанию. Однако, если значение переполнения установлено в скрытое, изображение будет отключено на 300 пикселей.
|
||||
Например, заданный элемент уровня блока (`<div>`) имеет ширину 300px и содержит изображение шириной 400px. Изображение будет торчать из `<div>` и будет видимым по умолчанию. Однако, если значение `overflow` установлено в `hidden`, изображение будет обрезано в 300px.
|
||||
|
||||
## Значения
|
||||
|
||||
* `visible` : Это значение по умолчанию для свойства. Содержимое не обрезается, если оно больше, чем поле.
|
||||
* `hidden` : переполненное содержимое будет скрыто.
|
||||
* `scroll` : похоже на скрытый, но пользователи смогут прокручивать скрытый контент.
|
||||
* `auto` : Если содержимое выходит за пределы его поля, то это содержимое будет скрыто, в то время как полоса прокрутки должна быть видимой для пользователей, чтобы прочитать остальную часть содержимого.
|
||||
* `initial` : Использует значение по умолчанию, которое видно.
|
||||
* `inherit` : Устанавливает переполнение для значения его родительского элемента.
|
||||
* `visible`: Это значение свойства по умолчанию. Содержимое не обрезается, если оно больше блока.
|
||||
* `hidden`: Переполненный контент будет скрыт.
|
||||
* `scroll`: Похоже на `hidden`, но пользователи смогут прокручивать скрытое содержимое.
|
||||
* `auto`: Если содержимое выходит за рамки своего блока, то это содержимое будет скрыто, в то время как полоса прокрутки должна быть видна для пользователей, чтобы прочитать остальную часть содержимого.
|
||||
* `initial`: Использует значение `visible` по умолчанию.
|
||||
* `inherit`: Задает для `overflow` значение родительского элемента.
|
||||
|
||||
## Примеры
|
||||
|
||||
### Видимых:
|
||||
### Visible:
|
||||
```css
|
||||
.box-element { overflow: visible; }
|
||||
```
|
||||
![Пример свойства `visible`](https://habrastorage.org/webt/h0/ck/2n/h0ck2nev-nedlfbwsetq9al0ufo.png "Пример свойства `visible`")
|
||||
|
||||
### Hidden:
|
||||
```css
|
||||
.box-element { overflow: hidden; }
|
||||
```
|
||||
![Пример свойства `hidden`](https://habrastorage.org/webt/mv/rf/bx/mvrfbxzsyv_vud5psjpjytkcbyy.png "Пример свойства `hidden`")
|
||||
|
||||
### Scroll:
|
||||
```css
|
||||
.box-element { overflow: scroll; }
|
||||
```
|
||||
![Пример свойства `scroll`](https://habrastorage.org/webt/87/ta/4b/87ta4b_xusokvzxfix_cv1x6uqo.png "Пример свойства `scroll`")
|
||||
|
||||
### Auto:
|
||||
```css
|
||||
.box-element { overflow: auto; }
|
||||
```
|
||||
![Пример свойства `auto`](https://habrastorage.org/webt/pm/vn/as/pmvnasexw8adhg2ietpvukv1alw.png "Пример свойства `auto`")
|
||||
|
||||
## overflow-x и overflow-y
|
||||
|
||||
* `overflow-x`: Позволяет пользователю прокручивать содержимое, выходящее за пределы высоты элемента.
|
||||
* `overflow-y`: Позволяет пользователю прокручивать содержимое, выходящее за пределы элемента.
|
||||
|
||||
```css
|
||||
.box-element { overflow: visible; }
|
||||
.box-element {
|
||||
overflow-x: scroll;
|
||||
overflow-y: auto;
|
||||
}
|
||||
```
|
||||
И `.box-element` будет выглядеть так:
|
||||
![Пример свойства `overflow-x` и `overflow-y`](https://habrastorage.org/webt/7e/d6/c-/7ed6c-khxxxpl3119in2keqtb7w.png "Пример свойства `overflow-x` и `overflow-y`")
|
||||
|
||||
![Пример изображения](https://s26.postimg.org/gweu6g5yh/1-vissible.png)
|
||||
Если содержимое переполняется по оси - Y, то это содержимое будет скрыто, в то время как полоса прокрутки должна быть видна для пользователей, чтобы прочитать остальную часть содержимого.
|
||||
|
||||
### Скрытые:
|
||||
#### Подробная информация
|
||||
|
||||
```css
|
||||
.box-element { overflow: hidden; }
|
||||
```
|
||||
|
||||
![Пример изображения](https://s26.postimg.org/l49mf77e1/2-hidden.png)
|
||||
|
||||
### Прокрутка:
|
||||
|
||||
```css
|
||||
.box-element { overflow: scroll; }
|
||||
```
|
||||
|
||||
![Пример изображения](https://s26.postimg.org/d8z30dxrd/3-scroll.png)
|
||||
|
||||
### Авто:
|
||||
|
||||
```css
|
||||
.box-element { overflow: auto; }
|
||||
```
|
||||
|
||||
![Пример изображения](https://s26.postimg.org/z5q7ei0bt/4-autoank.png)
|
||||
|
||||
## переполнение-x и переполнение-y
|
||||
|
||||
* `overflow-x` : позволяет пользователю прокручивать содержимое, которое выходит за пределы высоты элемента box.
|
||||
* `overflow-y` : позволяет пользователю прокручивать содержимое, выходящее за пределы ширины окна.
|
||||
|
||||
```css
|
||||
.box-element {
|
||||
overflow-x: scroll;
|
||||
overflow-y: auto;
|
||||
}
|
||||
```
|
||||
|
||||
`.box-element` будет выглядеть так: ![Пример изображения](https://s26.postimg.org/ff2kmdfzd/5-_Xand_Y.png)
|
||||
|
||||
Если содержимое переполняет ось Y, то это содержимое будет скрыто, в то время как полоса прокрутки должна быть видимой для пользователей, чтобы прочитать остальную часть содержимого.
|
||||
|
||||
#### Дополнительная информация:
|
||||
|
||||
CSS-трюки: [переполнение](https://css-tricks.com/almanac/properties/o/overflow/)
|
||||
* [CSS-Tricks](https://css-tricks.com/almanac/properties/o/overflow/)
|
||||
|
|
Loading…
Reference in New Issue