Как спрятать всё, что не поместилось в элементе. CSS-свойство overflow

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

Чтобы указать, как должно отображаться содержимое элемента…

<div class="container">
	<p>Константиновский Константин Константинович</p>
</div>

…нужно задать этому элементу стили:

.container {
  overflow: auto;
}

В этом примере мы добавим контейнеру полосу прокрутки, если имя не будет в нём помещаться.

Значения overflow

По умолчанию у overflow стоит значение visible, то есть содержимое будет отображаться как есть. Например, слишком длинный текст выйдет за пределы родительского элемента.

Значение hidden скрывает часть содержимого, которая не поместилась в контейнере.

Значение scroll добавляет полосы прокрутки.

Значение auto автоматически определяет, нужно ли добавлять полосы прокрутки. Полосы появляются, когда содержимое выпадает из родительского контейнера, и исчезают, если оно помещается целиком.

Это значение более гибкое: при overflow: scroll полосы прокрутки сохраняются, даже если элемент помещается в контейнере, а при overflow: auto они исчезают.

Ошибки при использовании overflow

Использовать overflow: hidden для обрезки важного текста — пользователь не увидит спрятанную информацию и не поймёт написанное. Гораздо уместнее использовать это значение для оформления сайта, например, чтобы обрезать часть декоративного изображения.

Использовать overflow: scroll для всего содержимого страницы — если так сделать, на странице появятся лишние полосы прокрутки.

Наследуется ли свойство overflow

Свойство не наследуется, но дочерние элементы будут отображаться с учётом значения overflow. Например, здесь текст «Я вообще не влезаю в эту строку» обрежется, если выйдет за пределы <div class="parent">:

<div class="parent">
  <div>
    Я вообще не влезаю в эту строку
  </div>
</div>

.parent {
  overflow: hidden;
}

Для дочерних элементов можно прописать собственное значение overflow:

<div class="parent">
  <div class="child">
  Я вообще не влезаю в эту строку
  </div>
</div>

.parent {
  overflow: hidden;
}
.child {
  overflow: auto;
}

В этом примере мы задали дочернему элементу свойство overflow: auto. То есть содержимое будет обрезано, но появится полоса прокрутки.

Материалы по теме

• Как размыть картинку. CSS-свойство filter
• Как сделать фон на странице. CSS-свойство background
• Как изменить ширину элемента. CSS-свойство width
• Как изменить цвет на странице. CSS-свойство color
• Как передвинуть элемент на странице. CSS-свойство position

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.