Макет CSS — переполнение

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

Этот текст очень длинный, а высота его контейнера всего 100 пикселей. Поэтому добавляется полоса прокрутки, чтобы помочь читателю прокручивать содержимое. Боль сама по себе любовь Вот почему это для малейшего, кто наша обычная практика терпит, чтобы воспользоваться последствиями Боль боли в бюро на олимпиаде, или боль в бюро на олимпиаде, он хочет досадить последствиям, или он страдает от боли иммунной системы ес на правду, эрос и потребитель, и очередная ненависть к ззрилам. Для свободного времени, когда мы свободны от наших подростков, нет выбора Типам не присуща ясностьЭто польза читателя в тех, кто создает свою ясность.

CSS переполнение

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

Свойство overflowимеет следующие значения:

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

Примечание. Это overflowсвойство работает только для блочных элементов с указанной высотой.

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

переполнение: видимое

По умолчанию переполнение имеет visibleзначение , что означает, что оно не обрезается и отображается вне поля элемента:

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

Пример

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

переполнение: скрыто

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

Пример

div {
overflow: hidden;
}

переполнение: прокрутка

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

Пример

div {
overflow: scroll;
}

переполнение: авто

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

Пример

div {
overflow: auto;
}

переполнение-x и переполнение-y

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

overflow-xуказывает, что делать с левым/правым краями содержимого.
overflow-yуказывает, что делать с верхними/нижними краями содержимого.

Пример

div {
overflow-x: hidden; /* Hide horizontal scrollbar */
overflow-y: scroll; /* Add vertical scrollbar */
}

Все свойства переполнения CSS

Property	Description
overflow	Specifies what happens if content overflows an element's box
overflow-wrap	Specifies whether or not the browser can break lines with long words, if they overflow its container
overflow-x	Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y	Specifies what to do with the top/bottom edges of the content if it overflows the element's content area

❮ Предыдущий Следующий ❯

Учебник по CSS

CSS расширенный

CSS Отзывчивый

CSS -сетка

CSS SASS

Примеры CSS

Ссылки на CSS

Макет CSS — переполнение

CSS переполнение

переполнение: видимое

Пример

переполнение: скрыто

Пример

переполнение: прокрутка

Пример

переполнение: авто

Пример

переполнение-x и переполнение-y

Пример

Проверьте себя с помощью упражнений

Упражнение:

Все свойства переполнения CSS