Клавиша / esc

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: hidden;}
          .selector {
  overflow: hidden;
}

        
        
          
        
      

Как понять

Скопировано

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

Значения

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

Подсказки

Скопировано

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

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

На практике

Скопировано

Realetive советует

Скопировано

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

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

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