Что такое overflow в css

CSS Layout — Overflow

Свойство CSS overflow управляет тем, что происходит с содержимым, которое слишком велико для размещения в области.

CSS Overflow

Свойство overflow указывает, следует ли вырезать содержимое или добавлять полосы прокрутки, если содержимое элемента слишком велико для размещения в указанной области.

Свойство overflow имеет следующие значения:

  • visible — По умолчанию. Переполнение не обрезается. Он вырисовывается вне поля элемента
  • hidden — Переполнение обрезается, а остальное содержимое будет невидимым
  • scroll — Переполнение обрезается, но для просмотра остальной части содержимого добавляется полоса прокрутки
  • auto — Если переполнение обрезано, необходимо добавить полосу прокрутки для просмотра оставшейся части содержимого

Примечание: Свойство overflow работает только для элементов блока с заданной высотой.

Примечание: В OS X Lion (на Mac) полосы прокрутки скрыты по умолчанию и отображаются только при использовании (даже если задано "переполнение: прокрутка").

переполнение: видимый

По умолчанию переполнение является visible , что означает, что оно не обрезается и отображается вне поля элемента:

Пример

переполнение: скрытый

При значении hidden переполнение обрезается, а оставшаяся часть содержимого скрывается:

Пример

переполнение: прокрутка

Установка значения scroll , переполнение обрезается и полосы прокрутки добавляется, чтобы прокручивать внутри окна. Обратите внимание, что это добавит полосу прокрутки как горизонтально, так и вертикально (даже если она вам не нужна):

Пример

переполнение: Авто

Значение auto аналогично scroll , только при необходимости добавляются полосы прокрутки:

Пример

overflow-x и overflow-y

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

overflow-x Указывает, что делать с левыми/правыми краями содержимого.
overflow-y Указывает, что делать с верхними/нижними краями содержимого.

CSS Макет — Overflow

CSS свойство overflow управляет тем, что происходит с содержимым, которое слишком велико, чтобы поместиться в области.

CSS Overflow

Свойство overflow указывает, следует ли обрезать содержимое или добавлять полосы прокрутки, если содержимое элемента слишком велико, чтобы поместиться в указанной области. Например, если текст не помещается в блочный элемент <div> .

Overflow — (перевод с анг.) — Переполнение.

Свойство overflow имеет следующие значения:

  • visible — По умолчанию. Переполнение не обрезается. Контент отображается вне поля элемента
  • hidden — Переполнение обрезается (скрывается), а остальная часть содержимого будет невидимой
  • scroll — Переполнение обрезается, и добавляется полоса прокрутки, чтобы увидеть остальную часть содержимого
  • auto — Аналогичен scroll , но добавляет полосы прокрутки только при необходимости

Примечание: Свойство overflow работает только для блочных элементов с указанной высотой.

Примечание: В OS X Lion (на Mac) полосы прокрутки по умолчанию скрыты и отображаются только при использовании (даже если установлено "overflow: scroll").

overflow: visible

По умолчанию, переполнение visible означает, что оно не обрезается и отображается вне поля элемента:

Пример

overflow: hidden

Со значением hidden , переполнение обрезается, а остальное содержимое скрыто:

Пример

overflow: scroll

При установке значения scroll переполнение обрезается, и для прокрутки внутри поля добавляется полоса прокрутки. Обратите внимание, что это добавит полосу прокрутки как по горизонтали, так и по вертикали (даже если она вам не нужна):

Пример

overflow: auto

Значение auto аналогично scroll , но добавляет полосы прокрутки только при необходимости:

Пример

overflow-x и overflow-y

Свойства overflow-x и overflow-y указывают, следует ли изменять переполнение содержимого только по горизонтали или только по вертикали (или оба):

overflow-x указывает, что делать с левым/правым краем содержимого.
overflow-y указывает, что делать с верхним/нижним краем содержимого.

overflow

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

Использование свойства overflow со значениями, отличными от visible , (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования. Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float’ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута scrollTop для соответствующего HTML-элемента, даже если overflow имеет значение hidden , элемент, возможно, придётся прокрутить.

    : as specified, except with visible / clip computing to auto / hidden respectively if one of overflow-x (en-US) or overflow-y (en-US) is neither visible nor clip : as specified, except with visible / clip computing to auto / hidden respectively if one of overflow-x (en-US) or overflow-y (en-US) is neither visible nor clip

Синтаксис

Значения

Расширения Mozilla

Используйте overflow:hidden . -moz-scrollbars-horizontal Использование overflow-x (en-US) и overflow-y (en-US) предпочтительнее. -moz-scrollbars-vertical Использование overflow-x (en-US) и overflow-y (en-US) предпочтительнее. -moz-hidden-unscrollable Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку XML root элементов и <html> , <body> клавишами со стрелками и колесом мыши.

Примеры

visible (default)
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: hidden
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: scroll
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

overflow: auto
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Спецификации

Changed syntax to allow one or two keywords instead of only one

Совместимость браузера

BCD tables only load in the browser

Firefox (Gecko) Примечания

Из-за Firefox 3.6 (Gecko 1.9.2), свойство overflow неверно применяется к элементам table-group ( <thead> , <tbody> , <tfoot> ). Это поведение будет исправлено в следующих версиях.

Internet Explorer Примечания

Internet Explorer 4 — 6 увеличивает элемент с overflow:visible (значение по умолчанию), чтобы заполнить содержимое в нём. height/width действуют подобно min-height/min-width .

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *