Свойство overflow-x

Описание

Управляет отображением содержания блочного элемента по горизонтали, если контент целиком не помещается и выходит за область справа или слева от блока.

Синтаксис

overflow-x: auto | hidden | scroll | visible;
Значение Описание
visible Отображается всё содержимое элемента, даже за пределами установленной высоты и ширины.
hidden Отображается только область внутри элемента, остальное будет скрыто.
scroll Всегда добавляются полосы прокрутки.
auto Полосы прокрутки добавляются только при необходимости.

Пример

<!DOCTYPE html>
<html lang='ru'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Document</title>
</head>
<body>
<style>
 #test2 {
 overflow-x: scroll;
 overflow-y: hidden;
 width: 300px;
 height: 150px;
 padding: 7px;
 border: 3px solid black;
 }
 </style>
 <div id='test2'>
 Далеко-далеко за словесными, 55555555555555555555555555555555555 горами в стране гласных и согласных живут рыбные
 тексты. Грамматики4444444444444444444444444444444444 сбить, диких предложения себя языкового переулка текстами
 моей, языком, рот которой инициал333333333333333333333333 буквенных пустился скатился переписывается
 коварный букв страну.
 </div>
 </div>
</body>
</html>
Далеко-далеко за словесными, 55555555555555555555555555555555555 горами в стране гласных и согласных живут рыбные тексты. Грамматики4444444444444444444444444444444444 сбить, диких предложения себя языкового переулка текстами моей, языком, рот которой инициал333333333333333333333333 буквенных пустился скатился переписывается коварный букв страну.

Читайте также