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

Свойства модуля CSS переполнение позволяют обрабатывать прокрутку переполненного содержимого в визуальных медиа.

Переполнение происходит, когда содержимое в элементе выходит за пределы одной или нескольких границ. Прокручиваемое переполнение — это содержимое, которое отображается за пределами элемента, для которого может потребоваться механизм прокрутки. Свойства CSS переполнения позволяют контролировать действия при переполнении содержимого элементом.

Эффекты отрисовки, которые выходят за пределы содержимого, но не участвуют в модели CSS-боксов, не влияют на макет. Этот тип переполнения также известен как переполнение чернил. Примеры переполнения чернил включают тени блоков, изображения границ, декорации текста, нависающие глифы и обводки. Переполнение чернил не расширяет область прокручиваемого переполнения.

Переполнение в действии

Попробуйте следующий пример, чтобы увидеть эффекты различных значений свойства overflow на переполнение содержимого и полосы прокрутки в смежном фиксированного размера блоке.

Пример включает варианты изменения значений для свойств overflow-clip-margin и width, а также для программированной прокрутки содержимого, если свойство переполнения создаёт контейнер прокрутки. Выберите overflow: clip и посмотрите эффект различных значений overflow-clip-margin. Выберите overflow: hidden или overflow: scroll, чтобы посмотреть различные настройки ползунков ScrollLeft и ScrollTop.

В содержании выше приведённая ссылка демонстрирует эффекты фокусировки клавиатуры на поведении переполнения и прокрутки. Попробуйте нажать клавишу Tab на ссылке или выполнить программированную прокрутку содержимого: содержимое будет прокручиваться только если перечисленное значение <overflow> создаёт контейнер прокрутки.

Справочник

Свойства CSS

Примечание: Модуль CSS переполнение уровня 4 вводит свойства block-ellipsis, continue, line-clamp, и max-lines. Они пока не реализованы.

Типы данных

<overflow> перечисляемые значения

Руководства

Переполняемое содержимое: CSS учебный блок: узнайте, что такое переполнение и как с ним справиться.
Создание анимации шкалы прогресса прокрутки с именем: Свойства CSS шкалы прокрутки scroll-timeline-name и scroll-timeline-axis, а также сокращённая запись scroll-timeline, создают анимации, привязанные к смещению прокрутки контейнера прокрутки.

Связанные понятия

scrollbar-width свойство CSS
scrollbar-color свойство CSS
scrollbar-gutter свойство CSS
scroll-behavior свойство CSS
scroll-margin сокращённое свойство CSS
scroll-padding сокращённое свойство CSS
scroll-snap-align свойство CSS
scroll-snap-stop свойство CSS
scroll-snap-type свойство CSS
text-overflow свойство CSS
::-webkit-scrollbar псевдоэлемент
scrollbar роль ARIA
Метод элемента scroll()
Метод элемента scrollBy()
Метод элемента scrollIntoView()
Метод элемента scrollTo()
Свойство элемента scrollTop
Свойство элемента scrollLeft
Свойство элемента scrollWidth
Свойство элемента scrollHeight
Событие документа scroll
Термин глоссария: Контейнер прокрутки
Термин глоссария: Переполнение чернил

Спецификации

Спецификация
Неизвестная спецификация
Неизвестная спецификация

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_overflow