CSS overflow (visible, hidden, scroll, auto). Примеры

Свойство CSS overflow отвечает за ситуацию, если содержимое элемента вылазит за рамки поставленных размеров. С помощью этого свойства можно корректно обрабатывать данные ситуации.

Синтаксис CSS overflow

overflow: value;

Где value может принимать значения:

visible - отображать все содержимое даже за пределами объекта
hidden - не выводить содержимое за пределами объекта (все что не влезает внутрь будет скрыто)
scroll - добалять полосу прокрутки (всегда)
auto - добавлять полосу прокрутки только при необходимости
inherit - унаследование от элемента родителя;

Пример №1. Использование overflow:visible

Ниже представлен код примера, который выводит содержимое (текст) даже за пределами объекта.

<html>
<head>
<style>
	.primer1{ 
	width: 100px; 
	height: 40px; 
	border: 1px solid #000;
	overflow: visible;
	}
</style>
</head>
<body>
	<div class="primer1">Пример №1 использования overflow:visible</div> 
</body>
</html>

Вот как это выглядит на странице:

Пример №1 использования overflow:visible

Пример №2. Использование overflow:auto

Ниже представлен код примера, который выводит содержимое (текст) даже за пределами объекта.

<html>
<head>
<style>
	.primer2{ 
	width: 120px; 
	height: 50px; 
	border: 1px solid #000;
	overflow: auto;
	}
</style>
</head>
<body>
	<div class="primer2">Пример №2 использования overflow:auto</div> 
</body>
</html>

Вот как это выглядит на странице:

Пример №2 использования overflow:auto

← Перейти в каталог CSS уроков