Переполнение: прокрутка, обрезка и автоматический режим
Управляйте поведением содержимого, выходящего за границы контейнера, с помощью свойств overflow.
«Переполнение: прокрутка, обрезка и автоматический режим» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое переполнение
Переполнение возникает, когда содержимое элемента превышает его заданные размеры. Свойство overflow определяет, что делать с этим лишним содержимым.
overflow: visible (По умолчанию)
По умолчанию содержимое выходит за пределы блока элемента и остаётся видимым за его пределами. Это может привести к перекрытию соседних элементов или выходу содержимого за пределы области просмотра.
<div class="box">This text is long enough to spill outside the box edges visibly.</div>
overflow: hidden
overflow: hidden обрезает любое содержимое, выходящее за границы элемента. Обрезанное содержимое недоступно и не прокручивается.
<div class="cropped">This long text gets clipped by the rounded box edges instead of spilling out.</div>
overflow: scroll
overflow: scroll всегда отображает полосы прокрутки, даже когда содержимое помещается. Используйте это значение, если интерфейс должен выглядеть одинаково независимо от размера содержимого.
<pre class="code-block">line 1
line 2
line 3
line 4
line 5
line 6
line 7
line 8
line 9
line 10</pre>
overflow: auto
overflow: auto отображает полосы прокрутки только при фактическом переполнении содержимого. Обычно это предпочтительнее scroll, поскольку позволяет избежать ненужного места под полосы прокрутки.
<div class="sidebar"><p>Paragraph one.</p><p>Paragraph two.</p><p>Paragraph three.</p><p>Paragraph four.</p><p>Paragraph five.</p><p>Paragraph six.</p></div>
overflow: clip
overflow: clip похож на hidden, но действует строже: он не создаёт контекст форматирования блоков, и его нельзя прокрутить с помощью JavaScript. Это идеальный вариант для безопасного с точки зрения производительности обрезания содержимого.
<div class="clipped">This long text will be clipped at the box edge with no scrollbar, unlike overflow hidden which still allows programmatic scrolling.</div>
overflow-x и overflow-y
Управляйте каждой осью независимо. Распространённый шаблон позволяет прокручивать по горизонтали широкое содержимое, например код или таблицы:
<div class="table-container"><table><tr><td>Col A</td><td>Col B</td><td>Col C</td><td>Col D</td><td>Col E</td><td>Col F</td></tr></table></div>
Шаблон прокручиваемого контейнера
Чтобы создать прокручиваемый контейнер, нужны фиксированная высота и overflow: auto или scroll:
<div class="chat-messages"><p>Hey!</p><p>How's it going?</p><p>Working on the CSS course.</p><p>Nice, how far are you?</p><p>Almost done with overflow.</p><p>Let's grab lunch after.</p></div>
Блочный контекст форматирования из overflow
Установка для overflow любого значения, кроме visible, создаёт блочный контекст форматирования (BFC). Он изолирует внутренние плавающие элементы и не позволяет схлопыванию внешних отступов выйти за пределы контейнера.
Цепочка прокрутки
Когда прокручиваемый контейнер достигает предела, события прокрутки могут «передаваться по цепочке» родительскому элементу. Используйте overscroll-behavior: contain, чтобы предотвратить это.
<div class="modal-body"><p>Modal content line 1</p><p>Modal content line 2</p><p>Modal content line 3</p><p>Modal content line 4</p><p>Modal content line 5</p><p>Modal content line 6</p></div>
text-overflow и overflow
text-overflow: ellipsis относится к тексту внутри элемента и для работы требует сочетания overflow: hidden + white-space: nowrap. Свойство overflow управляет поведением переполнения самого элемента.
Быстрая проверка
Какое значение overflow показывает полосы прокрутки только при фактическом переполнении содержимого?
Итоги
overflow: hidden обрезает содержимое. overflow: auto добавляет полосы прокрутки только при необходимости (предпочтительный вариант). overflow: scroll всегда показывает полосы прокрутки. overflow: clip обрезает содержимое, не создавая новый контекст форматирования. Используйте overflow-x/y для управления отдельными осями.
Изучай CSS с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 40
- Уроки
- 159
Часто задаваемые вопросы
Урок «Переполнение: прокрутка, обрезка и автоматический режим» бесплатный?
Да — полный текст урока «Переполнение: прокрутка, обрезка и автоматический режим» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Переполнение: прокрутка, обрезка и автоматический режим»?
Управляйте поведением содержимого, выходящего за границы контейнера, с помощью свойств overflow. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Переполнение: прокрутка, обрезка и автоматический режим»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Блочные, строчные и строчно-блочные элементы
- Видимость и display: none
- Переполнение: прокрутка, обрезка и автоматический режим
- Сброс CSS и Normalize