overflow

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство overflow позволяет буквально определить, что делать с содержимым блочного (то есть для элемента, у которого display определяется как block, inline-block, flex или grid) элемента, если оно не влезает в размеры — отобразить или обрезать (с полосами прокрутки или без).

Пример

Секция статьи "Пример"

Если содержимое блока будет больше, чем границы блока, оно будет «обрезано»:

        
          
          .article {  /* Задаём ограничения по размеру блока */  width: 300px;  height: 300px;  overflow: hidden;}
          .article {
  /* Задаём ограничения по размеру блока */
  width: 300px;
  height: 300px;
  overflow: hidden;
}

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"
        
          
          .selector {    overflow: visible;    overflow: hidden;    overflow: clip;    overflow: scroll;    overflow: auto;}
          .selector {
    overflow: visible;
    overflow: hidden;
    overflow: clip;
    overflow: scroll;
    overflow: auto;
}

        
        
          
        
      

Как это понять

Секция статьи "Как это понять"

Синтаксис свойства позволяет задать два значения — для x- и y-оси (аналогичного результат можно добиться, используя самостоятельные CSS-свойства overflow-x и overflow-y). Если указано одно значение, оно равнозначно применяется для обеих осей.

Значения

Секция статьи "Значения"
  • visible — содержимое отображается снаружи родительского блока, если его размеры больше размеров «родительского» блока (значение по умолчанию);
  • hidden — содержимое, выходящее за пределы «родительского» блока, обрезается по его границам без прокрутки;
  • clip — новое значение (поддерживается всеми основными браузерами, кроме Safari, похожее по результату на hidden, но границы родительского блока рассчитываются с учётом внутренних отступов;
  • scroll — контент обрезается по границам «родительского» блока, но внутри этой области содержимое доступно с помощью прокрутки;
  • auto — если содержимое переполняет блок, контент будет доступен для прокрутки.

Подсказки

Секция статьи "Подсказки"

💡 Чтобы контент внутри блока можно было скроллить, его содержимое должно явно превышать высоту родительского блока. Этого можно добиться или явно задав ему height, или ограничив высоту родительского блока.

💡 Задавая родительскому блоку фиксированную высоту, учитывайте, что, если не указан box-sizing: border-box, то это значение не учитывает внутренние отступы, заданные с помощью padding, что может спровоцировать появление нежелательной прокрутки.

На практике

Секция статьи "На практике"

Realetive

Секция статьи "Realetive"

🛠 При вёрстке «классических» макетов необходимости в управлении полосой прокрутки практически нет. Чтобы избежать появления нежелательных полос прокрутки, минимизируйте явное задание высоты (кроме случаев, где это действительно необходимо).

Ещё один пример, когда будет полезно знание свойства overflow — обрезание текста с многоточием (в сочетании со свойством text-overflow: ellipsis или недокументированного -webkit-line-clamp):

Открыть демо в новой вкладке