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