Режим отображения CSS - переполнение

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

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

Попробуйте сами

CSS Overflow

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

overflow Атрибут может устанавливать следующие значения:

  • visible - По умолчанию. Избыток не обрезается. Содержимое рендерится за пределами рамки элемента
  • hidden - Избыток обрезается, оставшееся содержимое не видно
  • scroll - Избыток обрезается, и добавляется полоска прокрутки для просмотра оставшегося содержимого
  • auto - С scroll Подобно, но добавляет полоску прокрутки только в случае необходимости

Комментарий:overflow Атрибут действует только на блочные элементы с указанной высотой.

Комментарий:В OS X Lion (на Mac) полоска прокрутки по умолчанию скрыта и отображается только при использовании (даже если установлено "overflow:scroll").

overflow: visible

По умолчанию, избыток виден (visible), что означает, что его не обрезают, а渲染ят за пределами рамки элемента:

Когда вы хотите лучше контролировать макет, вы можете использовать атрибут overflow. Атрибут overflow определяет, что会发生, если содержимое выходит за пределы рамки элемента.

Пример

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

Попробуйте сами

overflow: hidden

если использовать hidden значение, избыток будет обрезан, а остальное содержимое будет скрыто:

Когда вы хотите лучше контролировать макет, вы можете использовать атрибут overflow. Атрибут overflow определяет, что会发生, если содержимое выходит за пределы рамки элемента.

Пример

div {
  overflow: hidden;
}

Попробуйте сами

overflow: scroll

если значение установлено scrollизбыток будет обрезан, и добавлена полоска прокрутки для скроллинга внутри рамки. Обратите внимание, что это добавит полоску прокрутки в горизонтальном и вертикальном направлениях (даже если вам это не нужно):

Когда вы хотите лучше контролировать макет, вы можете использовать атрибут overflow. Атрибут overflow определяет, что会发生, если содержимое выходит за пределы рамки элемента.

Пример

div {
  overflow: scroll;
}

Попробуйте сами

overflow: auto

auto значение подобно scrollно он добавляет полоску прокрутки только в случае необходимости:

Когда вы хотите лучше контролировать макет, вы можете использовать атрибут overflow. Атрибут overflow определяет, что会发生, если содержимое выходит за пределы рамки элемента.

Пример

div {
  overflow: auto;
}

Попробуйте сами

overflow-x и overflow-y

overflow-x и overflow-y Атрибут определяет, только горизонтально или вертикально (или и то, и другое) изменять прокрутку содержимого:

  • overflow-x Определяет, как обрабатывать левый/правый край содержимого.
  • overflow-y Определяет, как обрабатывать верхний/нижний край содержимого.
Когда вы хотите лучше контролировать макет, вы можете использовать атрибут overflow. Атрибут overflow определяет, что会发生, если содержимое выходит за пределы рамки элемента.

Пример

div {
  overflow-x: hidden; /* Скрыть горизонтальную полосу прокрутки */
  overflow-y: scroll; /* Добавить вертикальную полосу прокрутки */
}

Попробуйте сами

Все свойства CSS Overflow

Свойство Описание
overflow Определение того, что会发生, если содержимое выходит за пределы области элемента.
overflow-x Определение того, как обрабатывать края содержимого, когда содержимое выходит за пределы области содержимого.
overflow-y Указание, как обрабатывать верхние/нижние края содержимого, когда содержимое элемента выходит за пределы области содержимого.