Справочник HTML & CSS

overflow

Что делать с содержимым, которое не помещается в элемент.

Синтаксис

overflow: value;

Значения

Параметр	Тип	Описание
visible	keyword	Вылезает наружу (по умолчанию).
hidden	keyword	Обрезается; прокрутить его можно только кодом.
auto	keyword	Полоса прокрутки появляется при необходимости.
scroll	keyword	Полосы прокрутки видны всегда.
clip	keyword	Обрезается без возможности прокрутки.

Примеры

Разное поведение для вылезающего текста:

<style>
  div { width: 160px; height: 50px; border: 1px solid gray; margin-bottom: 30px; }
</style>
 
<div style="overflow: visible;">visible: the text sticks out of the block and overlaps what is below.</div>
<div style="overflow: hidden;">hidden: the extra text is cut off and cannot be seen.</div>
<div style="overflow: auto;">auto: a scrollbar appears only when the text does not fit.</div>

Прокрутка только по горизонтали — overflow-x:

<div style="overflow-x: auto; white-space: nowrap; width: 220px; border: 1px solid gray;">
  <img src="/media/photo-200x200.jpg" alt="" width="100">
  <img src="/media/photo-200x200.jpg" alt="" width="100">
  <img src="/media/photo-200x200.jpg" alt="" width="100">
</div>

Примечания

overflow, отличный от visible, ломает position: sticky у детей. Если вся страница прокручивается по горизонтали, найдите элемент шире экрана, а не прячьте его через overflow-x: hidden у body.

См. также

text-overflow — Как обрезается текст, который не помещается: резко или с многоточием.
max-height — Максимальная высота: элемент растёт вместе с содержимым только до этого предела.
overflow-wrap — Разрешает разрывать длинное слово, чтобы оно не вылезало за блок.

Вопросы и ответы по теме

В учебнике

Переполнение и слои — Что делать, когда содержимое не помещается в блок — overflow, прокрутка, многоточие — и как z-index решает, какой элемент лежит сверху.

Спасибо, что читаете!