CSS свойство overflow

CSS свойства

Определение и применение

CSS свойство overflow указывает, что произойдёт, если содержимое переполняет размеры элемента.

Поддержка браузерами

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
overflow1.01.07.01.04.012.0

CSS синтаксис:

overflow:"visible | hidden | scroll | auto | initial | inherit";

JavaScript синтаксис:

object.style.overflow = "hidden"

Значения свойства

ЗначениеОписание
visibleПереполнение не обрезается, содержимое выходит за пределы размеров элемента. Это значение по умолчанию.
hiddenПереполнение обрезается (контент, который выходит за размеры будет невидимым).
scrollПереполнение обрезается, но добавляется полоса прокрутки, позволяющая увидеть содержимое, которое выходит из заданных размеров.
autoЕсли переполнение обрезается, то полоса прокрутки будет добавлена автоматически, чтобы увидеть содержимое, которое выходит из заданных размеров.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Свойство overflow.</title>
<style> 
div {
display  : inline-block; /* выравниваем вертикально все элементы <div> */
margin-right : 30px; /* устанавливаем внешний отступ справа для элементов <div> */
width : 100px; /* устанавливаем ширину для блоков */
height : 100px; /* устанавливаем высоту для блоков */
border : 1px solid red; /* устанавливаем для блоков сплошную границу размером 1px красного цвета*/
}
img {
width : 125px; /* устанавливаем ширину для изображения */
height : 125px; /* устанавливаем высоту для изображения */
}
.test {
overflow : visible; /* переполнение не обрезается, содержимое выходит за пределы размеров элемента */
}
.test2 {
overflow : hidden; /* переполнение обрезается (контент, который выходит за размеры будет невидимым) */
}
.test3 {
overflow : scroll; /*  переполнение обрезается, но добавляется полоса прокрутки */
}
.test4 {
overflow : auto; /* если переполнение будет обрезано, то добавится полоса прокрутки автоматически */
}
</style>
</head>
	<body>
		<div class = "test">visible
		<img src = nich.jpg alt = ничоси>
		</div>
		<div class = "test2">hidden
		<img src = nich.jpg alt = ничоси>
		</div>
		<div class = "test3">scroll
		<img src = nich.jpg alt = ничоси>
		</div>
		<div class = "test4">auto
		<img src = nich.jpg alt = ничоси>
		</div>
	</body>
</html>
Пример использования свойства overflow.
Пример использования свойства overflow.
CSS свойства