Может возникнуть ситуация, когда содержимое элемента оказывается больше, чем размеры самого блока. Например в небольшом блоке, ограниченном свойствами width и height не достаточно места для размещения содержимого элемента.

CSS-свойство overflow, позволяет указать, следует ли обрезать содержимое, отображать полосу прокрутки или отображать содержимое за пределами контейнера.

Это свойство может принимать одно из следующих значений: visible (по умолчанию), hidden, scroll, и auto. CSS3 имеет независимые свойства overflow-x и overflow-y для контроля вертикального и горизонтального переполнения контейнера.

div {
    width: 250px;
    height: 150px;
    overflow: scroll;
}
Значение Описание
visible Контент не обрезается; он будет отображаться вне контейнера, и, таким образом, может перекрывать другое содержимое. Это значение установлено по умолчанию.
hidden Контент, переполняющий контейнер, обрезается; обрезанная часть содержимого будет невидимой.
scroll Контент, переполняющий контейнер, обрезается и при hidden, но предоставляет механизм прокрутки (scroll) для доступа к обрезанному контенту. Полоса прокрутки добавляется всегда, даже если контента недостаточно для обрезания.
auto Работает так же как и scroll, за тем исключением, что полоса прокрутки (scroll) добавляется при необходимости.
initial Устанавливает это свойство в значение по умолчанию.
inherit Если указан, связанный элемент принимает вычисленное значение своего родительского элемента overflow.

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.