diff --git a/guide/russian/css/overflow/index.md b/guide/russian/css/overflow/index.md index 6b05719379..e27fd55b91 100644 --- a/guide/russian/css/overflow/index.md +++ b/guide/russian/css/overflow/index.md @@ -1,74 +1,66 @@ --- title: Overflow -localeTitle: перелив +localeTitle: Переполнение --- -# перелив +# Переполнение -Свойство `overflow` указывает, что произойдет, если содержимое переполняет поле элемента (это свойство работает только для элементов блока с указанной высотой). +Свойство `overflow` определяет, что произойдет, если содержимое переполнит поле элемента (это свойство работает только для элементов блока с указанной высотой). -Это свойство указывает, следует ли клип-контент или добавлять полосы прокрутки, когда содержимое элемента слишком велико, чтобы вписаться в указанную область. +Это свойство указывает, следует ли обрезать содержимое или добавить полосы прокрутки, если содержимое элемента слишком велико, чтобы поместиться в указанной области. -Например, заданный элемент уровня блока ( `
` ), установленный на ширину 300 пикселей, содержит изображение шириной 400 пикселей. Изображение будет выходить из div и быть видимым по умолчанию. Однако, если значение переполнения установлено в скрытое, изображение будет отключено на 300 пикселей. +Например, заданный элемент уровня блока (`
`) имеет ширину 300px и содержит изображение шириной 400px. Изображение будет торчать из `
` и будет видимым по умолчанию. Однако, если значение `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/) \ No newline at end of file +* [CSS-Tricks](https://css-tricks.com/almanac/properties/o/overflow/)