Свойство overflow: переполнение
Как управлять содержимым, которое не помещается в отведённую область.
Как это работает
overflow определяет, что делать с содержимым за пределами области блока. auto добавляет прокрутку при необходимости, hidden обрезает видимое содержимое, visible оставляет его выступающим. Чтобы вертикальное переполнение стало заметным, обычно нужна ограниченная высота.
Для кода и таблиц часто удобно overflow-x: auto: длинные строки не растягивают всю страницу. Не прячьте переполнение, пока не выяснили причину. Иначе можно скрыть важный текст, контур фокуса или часть интерактивного элемента.
Пример в интерфейсе
.scroll { max-height: 100px; overflow: auto; padding: 14px; border: 1px solid #bdd5c7; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| auto | Прокрутка при необходимости. |
| hidden | Обрезка с возможностью программной прокрутки. |
| clip | Обрезка без создания прокручиваемой области. |
| overflow-x / overflow-y | Управление отдельными направлениями. |
На что обратить внимание
overflow: hidden у предка может обрезать выпадающее меню и повлиять на поведение sticky. Проверяйте цепочку контейнеров.
Проверьте на практике
Увеличьте текст в блоке и переключите auto на hidden. Оцените, может ли читатель получить доступ ко всему содержимому.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.