CSS :: Свойство overflow-x

css-свойство overflow-x (от англ. overflow – переполнение) управляет отображением содержимого блочного элемента по горизонтали, когда оно переполняет его и выходит за область заданной ширины.

Характеристики

Значение по умолчанию: visible.
Применяется: к блочным элементам.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.overflowX="value".

Синтаксис

overflow-x: auto | hidden | scroll | visible

Значения

visible – в случае переполнения блочного элемента содержимым по ширине, оно будет отображаться даже за его пределами (т.е. обрезаться не будет).
hidden – содержимое, которое не поместиться в размеры блочного элемента по ширине, отображаться на странице не будет (т.е. будет обрезано).
scroll – в элемент будет добавлена горизонтальная полоса прокрутки. При этом содержимое, которое не поместиться в размеры блочного элемента по ширине, отображаться на странице не будет (т.е. будет обрезано), но его можно будет просмотреть при помощи горизонтальной полосы прокрутки.
auto – горизонтальная полоса прокрутки будет добавляться только в случае переполения блочного элемента его содержимым по ширине.

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css2/visufx.html#propdef-overflow

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/overflow-x

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		div{
		width: 300px;
		height: 80px;
		margin: 4em;
		padding: 5px;
		white-space: nowrap;
		}
		
		.overflow_x_1{
		overflow-x: visible; 
		}
		
		.overflow_x_2{
		overflow-x: hidden; 
		}
		
		.overflow_x_3{
		overflow-x: scroll; 
		}
		
		.overflow_x_4{
		overflow-x: auto; 
		}

	</style>
	
</head>
<body>

		<div class="overflow_x_1" style="background-color: violet;">
			overflow-x: visible overflow-x: visible overflow-x: visible<br>
			overflow-x: visible overflow-x: visible overflow-x: visible<br>
			overflow-x: visible overflow-x: visible overflow-x: visible<br>			 
			overflow-x: visible overflow-x: visible overflow-x: visible<br>		 
			overflow-x: visible overflow-x: visible overflow-x: visible<br>			 
			overflow-x: visible overflow-x: visible overflow-x: visible			 
		</div>
			
			
		<div class="overflow_x_2" style="background-color: yellow;">
			overflow-x: hidden overflow-x: hidden overflow-x: hidden<br>
			overflow-x: hidden overflow-x: hidden overflow-x: hidden<br>
			overflow-x: hidden overflow-x: hidden overflow-x: hidden<br>			 
			overflow-x: hidden overflow-x: hidden overflow-x: hidden<br>		 
			overflow-x: hidden overflow-x: hidden overflow-x: hidden<br>			 
			overflow-x: hidden overflow-x: hidden overflow-x: hidden
		</div>
			
		<div class="overflow_x_3" style="background-color: green;">
			overflow-x: scroll overflow-x: scroll overflow-x: scroll<br>
			overflow-x: scroll overflow-x: scroll overflow-x: scroll<br>
			overflow-x: scroll overflow-x: scroll overflow-x: scroll<br>			 
			overflow-x: scroll overflow-x: scroll overflow-x: scroll<br>		 
			overflow-x: scroll overflow-x: scroll overflow-x: scroll<br>			 
			overflow-x: scroll overflow-x: scroll overflow-x: scroll
		</div>
			
		<div class="overflow_x_4" style="background-color: violet;"> 
			overflow-x: auto overflow-x: auto overflow-x: auto<br>
			overflow-x: auto overflow-x: auto overflow-x: auto<br>
			overflow-x: auto overflow-x: auto overflow-x: auto<br>			 
			overflow-x: auto overflow-x: auto overflow-x: auto<br>		 
			overflow-x: auto overflow-x: auto overflow-x: auto<br>			 
			overflow-x: auto overflow-x: auto overflow-x: auto
		</div>
		
</body>
</html>

Пример №1