Свойство overflow-y | Справочник HTML CSS
Определяет, что делать с содержимым элемента, если оно не помещается в установленные размеры по оси Y
overflow-y: hidden;
Пошаговый план! Как быстро научиться создавать сайты!
Chrome
Все
Edge
Все
FireFox
Все
iOS Safari
Все
Opera
Все
Safari
Все
Значения
overflow-y: visible;
Содержимое элемента, которое не помещается в его размеры по оси Y, не обрезается.
<style>
.example-1 {
width: 150px;
height: 50px;
overflow-y: visible;
background: #55bb61;
}
</style>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Velit, fugiat, tempore, repellat totam maiores distinctio
eum odio eaque ratione debitis possimus modi asperiores.
</div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Velit, fugiat, tempore, repellat totam maiores distinctio
eum odio eaque ratione debitis possimus modi asperiores.
overflow-y: hidden;
Содержимое элемента, которое не помещается в его размеры по оси Y, обрезается.
<style>
.example-2 {
width: 150px;
height: 50px;
overflow-y: hidden;
background: #55bb61;
}
</style>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Velit, fugiat, tempore, repellat totam maiores distinctio
eum odio eaque ratione debitis possimus modi asperiores.
</div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, fugiat, tempore, repellat totam maiores distinctio eum odio eaque ratione debitis possimus modi asperiores.
overflow-y: scroll;
При необходимости содержимое элемента, которое не помещается в его размеры по оси Y, обрезается.
Полоса вертикальной прокрутки всегда будет видна.
<style>
.example-3 {
width: 150px;
height: 50px;
overflow-y: scroll;
background: #55bb61;
}
</style>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Velit, fugiat, tempore, repellat totam maiores distinctio
eum odio eaque ratione debitis possimus modi asperiores.
</div>
<br>
<div>
Lorem ipsum dolor sit amet.
</div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, fugiat, tempore, repellat totam maiores distinctio eum odio eaque ratione debitis possimus modi asperiores.
Lorem ipsum dolor sit amet.
overflow-y: auto;
Содержимое элемента, которое не помещается в его размеры по оси Y, обрезается и появляется полоса вертикальной прокрутки.
<style>
.example-4 {
width: 150px;
height: 50px;
overflow-y: auto;
background: #55bb61;
}
</style>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Velit, fugiat, tempore, repellat totam maiores distinctio
eum odio eaque ratione debitis possimus modi asperiores.
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, fugiat, tempore, repellat totam maiores distinctio eum odio eaque ratione debitis possimus modi asperiores.
Читайте также
Обсуждение (0)
CSS overflow y
HTML5CSS.ru
ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
❮ Назад Полный CSS Справочник Дальше ❯
Пример
Показать различные значения свойств «overflow-y»:
div.ex1 {
overflow-y: scroll;
}
div.ex2 {
overflow-y: hidden;
}
div.ex3 {
overflow-y:
auto;
}
div.ex4 {
overflow-y: visible;
}
Определение и использование
Свойство overflow-y указывает, следует ли обрезать содержимое, добавить полосу прокрутки или отобразить содержимое overflow элемента уровня блока, когда оно перетекает по верхнему и нижнему краю.
Совет: Свойство overflow-x используется для определения обрезки с левого и правого краев.
| Значение по умолчанию: | visible |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | CSS3 |
| Синтаксис JavaScript: | object.style.overflowY=»scroll» |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Числа, за которыми следует -MS-, укажат первую версию, которая работала с префиксом.
| Свойство | |||||
|---|---|---|---|---|---|
| overflow-y | 4.0 | 9.0 8.0 -ms- | 3.5 | 3.0 | 9.5 |
Синтаксис CSS
overflow-y: visible|hidden|scroll|auto|initial|inherit;
Значения свойств
| Значение | Описание | |
|---|---|---|
| visible | Содержимое не обрезается и может отображаться вне поля содержимого. Это значение по умолчанию | |
| hidden | Содержимое обрезается, и механизм прокрутки не предоставляется | |
| scroll | Содержимое обрезается и обеспечивается механизм прокрутки | |
| auto | Может привести к тому, что для переполнения коробок будет предусмотрен механизм прокрутки | |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Похожие страницы
CSS Справочник: CSS Overflow
HTML DOM Справочник: overflowY Свойство
❮ Назад Полный CSS Справочник Дальше ❯
Популярное CSS
css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы
Copyright 2018-2020 HTML5CSS.
ru
Правила и Условия Политика конфиденциальности О нас Контакты
Переполнение CSS
❮ Назад Далее ❯
Свойство CSS overflow управляет тем, что
происходит с контентом, который слишком велик, чтобы поместиться в область.
Этот текст очень длинный, а высота его контейнера всего 100 пикселей. Поэтому добавляется полоса прокрутки, чтобы помочь читателю прокручивать содержимое. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Попробуйте сами »
CSS Overflow
Свойство overflow указывает, следует ли обрезать
содержание или
чтобы добавить полосы прокрутки, когда содержимое элемента слишком велико, чтобы поместиться в указанном
область.
Свойство overflow имеет следующие значения:
-
visible— по умолчанию. Переполнение не отсекается. Содержимое отображается за пределами поля элемента -
hidden— Переполнение обрезается, а остальное содержимое будет невидимым -
прокрутка— переполнение обрезается, и добавляется полоса прокрутки для просмотра остального содержимого -
авто— Аналогичнопрокрутке, но добавляет полосы прокрутки только при необходимости
Примечание: Свойство overflow работает только для блочных элементов с заданной высотой.
Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если установлено «overflow:scroll»).
переполнение: видимое
По умолчанию переполнение видимое , что означает, что оно не обрезается и
визуализирует за пределами поля элемента:
Вы можете использовать свойство переполнения, если хотите лучше контролировать макет. Свойство overflow указывает, что произойдет, если содержимое переполнит блок элемента.
Пример
div {
ширина: 200 пикселей;
высота:
65 пикселей;
фоновый цвет: коралловый;
переполнение: видимое;
}
Попробуйте сами »
Со значением hidden переполнение обрезается, а остальное содержимое скрывается:
Вы можете использовать свойство overflow, когда хотите иметь лучший контроль над макетом.
Свойство overflow указывает, что произойдет, если содержимое переполнит блок элемента.
Пример
div {
переполнение: скрыто;
}
Попробуйте сами »
переполнение: прокрутите
Установка значения scroll , переполнение обрезается, и для прокрутки внутри поля добавляется полоса прокрутки. Обратите внимание, что это добавит полосу прокрутки как по горизонтали, так и по вертикали (даже если она вам не нужна):
Вы можете использовать свойство переполнения, если хотите лучше контролировать макет. Свойство overflow указывает, что произойдет, если содержимое переполнит блок элемента.
Пример
div {
переполнение: прокрутка;
}
Попробуйте сами »
переполнение: auto
Значение auto аналогично scroll ,
но он добавляет полосы прокрутки только при необходимости:
Вы можете использовать свойство переполнения, когда хотите лучше контролировать макет.
Пример
div {
переполнение: авто;
}
Попробуйте сами »
переполнение-x и переполнение-y
overflow-x и overflow-y свойства указывают
следует ли изменить переполнение содержимого только по горизонтали или по вертикали (или
оба):
overflow-x указывает, что делать с левым/правым краями
содержание.
overflow-y указывает, что делать с верхним/нижним краями
содержание.
Вы можете использовать свойство переполнения, если хотите лучше контролировать макет. Свойство overflow указывает, что произойдет, если содержимое переполнит блок элемента.
Пример
div {
переполнение-x: скрыто; /* Скрыть горизонтальную полосу прокрутки
*/
переполнение-y: прокрутка; /* Добавить вертикальную полосу прокрутки */
}
Попробуйте сами »
Проверьте себя с помощью упражнений
Упражнение:
Переместите полосу прокрутки к элементу
<стиль>
.вступление {
ширина: 200 пикселей;
высота: 70 пикселей;
: ;
}
<тело>
<дел>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio,
vitae scelerisque enim ligula venenatis dolor.
Начать упражнение
Все свойства переполнения CSS
| Свойство | Описание |
|---|---|
| перелив | Указывает, что произойдет, если содержимое выйдет за пределы блока элемента |
| переливная пленка | Указывает, может ли браузер разбивать строки длинными словами, если они переполняют свой контейнер |
| перелив-х | Указывает, что делать с левым/правым краями содержимого, если оно выходит за пределы области содержимого элемента |
| перелив-у | Указывает, что делать с верхним/нижним краями содержимого, если оно выходит за пределы области содержимого элемента |
❮ Предыдущий Следующий ❯
Свойство CSS overflow-wrap
❮ Предыдущий Полное руководство по CSS Следующий ❯
Пример
Разрешить браузеру разбивать строки длинными словами, если они переполняются контейнер:
div {
overflow-wrap: break-word;
}
Попробуйте сами »
Определение и использование
Свойство overflow-wrap указывает,
или нет, браузер может разбивать строки длинными словами, если они переполняют контейнер.
Показать демо ❯
| Значение по умолчанию: | обычный |
|---|---|
| По наследству: | да |
| Анимация: | нет. Читать про анимированный |
| Версия: | CSS3 |
| Синтаксис JavaScript: | объект .style.overflowWrap=»нормальный» Попытайся |
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Собственность | |||||
|---|---|---|---|---|---|
| переливная пленка | 23,0 | 18,0 | 49,0 | 6.1 | 12,1 |
Синтаксис CSS
overflow-wrap: normal|anywhere|break-word|initial|inherit;
Значения свойств
| Значение | Описание | Демо |
|---|---|---|
| обычный | Длинные слова не будут разбиваться, даже если они переполняют контейнер. Это по умолчанию | Демонстрация ❯ |
| везде | Длинные слова будут ломаться, если они переполняют контейнер | Демонстрация ❯ |
| ключевое слово | Длинные слова будут ломаться, если они переполняют контейнер | Демонстрация ❯ |
| начальный | Устанавливает для этого свойства значение по умолчанию. Читать про начальный | |
| унаследовать | Наследует это свойство от родительского элемента. Читать о наследует |
Связанные страницы
Учебник CSS: CSS Overflow
❮ Предыдущая Полное руководство по CSS Далее ❯
NEW
Мы только что запустили
видео W3Schools
Узнать
ПАЛИТРА ЦВЕТОВ
КОД ИГРЫ
Играть в игру
Лучшие учебники
Учебник по HTMLУчебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.
CSS Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
9003 900
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Лучшие примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
ФОРУМ | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.