Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 21.09.2018

Наверх

Наверх

Overflow: управление переполненными элементами

Быть может, вы уже сталкивались с ситуацией, когда контент определенного элемента словно выходит за его пределы. Это часто случается, если размеры содержимого оказываются больше, чем размеры контейнера, в котором оно находится. Например:


Контент за пределами блока
Блок div, переполненный текстовым содержимым

Как видим на рисунке, контента оказалось больше, чем может в себя вместить данный элемент div, поэтому контент просто «вылез» за границы блока.

Управлять таким поведением содержимого можно благодаря CSS-свойству overflow. Примените его к контейнеру, задав одно из следующих значений:

  • hidden — всё содержимое, выходящее за пределы контейнера, будет скрыто. Не подходит в случае с текстовым контентом, но очень часто используется на практике для решения других задач и предотвращения некоторых «казусов».
  • scroll — к контейнеру будут добавлены вертикальные и горизонтальные полосы прокрутки (скролл). Внешне блок становится похож на фрейм. Скролл отображается постоянно.
  • auto — также добавляются полосы скролла, но только тогда, когда они необходимы (т. е. если содержимое не влазит в контейнер).
  • visible — значение, установленное по умолчанию в браузере. Контент виден, даже если блок переполнен. Можно использовать для сброса другого значения, заданного ранее.

Покажем несколько примеров overflow в действии:


Overflow с разными значениями
Overflow с разными значениями

И напоследок — один из практических вариантов использования overflow: hidden:


Overflow со значением hidden
Overflow:hidden для ограничения графического контента

Поддержка браузерами

Свойство overflow воспринимается всеми используемыми браузерами, включая Internet Explorer 6.


Далее в учебнике: установка максимально допустимой ширины и высоты с помощью CSS.