CSS Переполнение
CSS overflow
CSS свойство overflow overflow
добавляет полосы прокрутки, если содержимое элемента является слишком большим, чтобы поместиться в заданном районе.
CSS свойство overflow
имеет следующие значения:
visible
видимый - По умолчанию. Переполнение не обрезается. Оно отображается за элементом блокаhidden
скрытый - Переполнение обрезается и остальной контент не будет видимscroll
прокручиваемый - Переполнение обрезается и добавляются полоса прокрутки, чтобы увидеть остальное содержимоеauto
автоматический - Если переполнение обрезается, полоса прокрутки должна быть добавлены, чтобы увидеть остальное содержимое
Примечание: CSS свойство overflow
работает только для блочных элементов с заданной высотой.
В OS X Lion (в Mac), полосы прокрутки по умолчанию скрыты и показываются только, когда используется overflow:scroll
.
CSS overflow: visible
Значение visible
по умолчанию, означает, что переполнение не обрезается и просматривается за пределами элемента:
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
Попробуйте сами »
CSS overflow: hidden
Значение hidden
обрезает переполнение и скрывает остальное содержимое:
div {
overflow: hidden;
}
Попробуйте сами »
CSS overflow: scroll
Установка значения scroll
обрезается переполнение и добавляется полоса прокрутки для прокрутки внутри блока. Обратите внимание, что можно добавить полосы прокрутки по горизонтали и вертикали (даже если Вам это не надо):
div {
overflow: scroll;
}
Попробуйте сами »
CSS overflow: auto
Значение auto
аналогично scroll
, только добавляет полосы прокрутки,
когда Вам это необходимо:
div {
overflow: auto;
}
Попробуйте сами »
CSS свойства overflow-x и overflow-y
CSS свойства overflow-x
и overflow-y
может изменить переполнение содержимого по горизонтали или по вертикали (одновременно):
CSS свойство overflow-x
определяет, что делать с левый/правый краями содержания.
CSS свойство overflow-y
определяет, что делать с верхним/нижним краями содержания.
div {
overflow-x: hidden; /* Скрыть горизонтальную полосу прокрутки */
overflow-y: scroll; /* Добавить вертикальную полосу прокрутки */
}
Попробуйте сами »
Все CSS свойства переполнения
Свойство | Описание |
---|---|
overflow | Указывает, что произойдет, если содержимое переполняет элемента блока |
overflow-x | Указывает, что делать с левым и правым краями контента, если переполнена область содержимого элемента |
overflow-y | Указывает, что делать с верхним/нижним краями контента, если переполнена область содержимого элемента |