overflow

overflow

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

Краткая информация

Синтаксис

overflow: auto | hidden | scroll | visible

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

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

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow

Объектная модель

Примечание

Internet Explorer до версии 7.0 включительно:

• относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position : fixed .

• Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
• Для блока, у которого указаны свойства float и overflow со значением scroll , игнорируется ширина, заданная через свойство max-width .
• Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.

Firefox 3.6 некорректно применяет overflow к группам ячеек таблицы ( , , ).

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

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

Рецепты

Справочник CSS

• !important
• ::after
• ::backdrop
• ::before
• ::first-letter
• ::first-line
• ::placeholder
• ::selection
• :active
• :blank
• :checked
• :default
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :focus-within
• :fullscreen
• :hover
• :in-range
• :indeterminate
• :invalid
• :lang
• :last-child
• :last-of-type
• :link
• :not
• :nth-child
• :nth-last-child
• :nth-last-of-type
• :nth-of-type
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :placeholder-shown
• :read-only
• :read-write
• :required
• :root
• :target
• :valid
• :visited
• @charset
• @document
• @font-face
• @import
• @keyframes
• @media
• @page
• @supports
• @viewport
• align-content
• align-items
• align-self
• all
• animation
• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timing-function
• aspect-ratio
• backdrop-filter
• backface-visibility
• background
• background-attachment
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-position-x
• background-position-y
• background-repeat
• background-size
• block-size
• border
• border-bottom
• border-bottom-color
• border-bottom-left-radius
• border-bottom-right-radius
• border-bottom-style
• border-bottom-width
• border-collapse
• border-color
• border-image
• border-left
• border-left-color
• border-left-style
• border-left-width
• border-radius
• border-right
• border-right-color
• border-right-style
• border-right-width
• border-spacing
• border-style
• border-top
• border-top-color
• border-top-left-radius
• border-top-right-radius
• border-top-style
• border-top-width
• border-width
• bottom
• box-decoration-break
• box-shadow
• box-sizing
• caption-side
• caret-color
• clear
• clip
• color
• column-count
• column-fill
• column-gap
• column-rule
• column-rule-color
• column-rule-style
• column-rule-width
• column-span
• column-width
• columns
• content
• counter-increment
• counter-reset
• cursor
• direction
• display
• empty-cells
• filter
• flex
• flex-basis
• flex-direction
• flex-flow
• flex-grow
• flex-shrink
• flex-wrap
• float
• font
• font-family
• font-kerning
• font-size
• font-stretch
• font-style
• font-variant
• font-weight
• height
• hyphens
• image-rendering
• justify-content
• left
• letter-spacing
• line-clamp
• line-height
• list-style
• list-style-image
• list-style-position
• list-style-type
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• marks
• max-height
• max-width
• min-height
• min-width
• mix-blend-mode
• object-fit
• opacity
• order
• orphans
• outline
• outline-color
• outline-offset
• outline-style
• outline-width
• overflow
• overflow-x
• overflow-y
• padding
• padding-block
• padding-block-end
• padding-block-start
• padding-bottom
• padding-inline
• padding-inline-end
• padding-inline-start
• padding-left
• padding-right
• padding-top
• page-break-after
• page-break-before
• page-break-inside
• perspective
• perspective-origin
• place-content
• pointer-events
• position
• quotes
• resize
• right
• scroll-behavior
• tab-size
• table-layout
• text-align
• text-align-last
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip-ink
• text-decoration-style
• text-emphasis
• text-emphasis-color
• text-emphasis-position
• text-emphasis-style
• text-fill-color
• text-indent
• text-orientation
• text-overflow
• text-shadow
• text-stroke
• text-stroke-color
• text-stroke-width
• text-transform
• top
• transform
• transform-origin
• transform-style
• transition
• transition-delay
• transition-duration
• transition-property
• transition-timing-function
• unicode-bidi
• user-select
• vertical-align
• visibility
• white-space
• widows
• width
• word-break
• word-spacing
• word-wrap
• writing-mode
• z-index
• zoom

Источник

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 советует

Скопировать ссылку «Realetive советует» Скопировано

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

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

Источник

Как спрятать всё, что не поместилось в элементе. CSS-свойство overflow

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

Чтобы указать, как должно отображаться содержимое элемента…

 
Константиновский Константин Константинович
 
 

В этом примере мы добавим контейнеру полосу прокрутки, если имя не будет в нём помещаться.

Значения overflow

По умолчанию у overflow стоит значение visible , то есть содержимое будет отображаться как есть. Например, слишком длинный текст выйдет за пределы родительского элемента.

Значение hidden скрывает часть содержимого, которая не поместилась в контейнере.

Значение scroll добавляет полосы прокрутки.

Значение auto автоматически определяет, нужно ли добавлять полосы прокрутки. Полосы появляются, когда содержимое выпадает из родительского контейнера, и исчезают, если оно помещается целиком.

Это значение более гибкое: при overflow: scroll полосы прокрутки сохраняются, даже если элемент помещается в контейнере, а при overflow: auto они исчезают.

Ошибки при использовании overflow

Использовать overflow: hidden для обрезки важного текста — пользователь не увидит спрятанную информацию и не поймёт написанное. Гораздо уместнее использовать это значение для оформления сайта, например, чтобы обрезать часть декоративного изображения.

Использовать overflow: scroll для всего содержимого страницы — если так сделать, на странице появятся лишние полосы прокрутки.

Наследуется ли свойство overflow

Свойство не наследуется, но дочерние элементы будут отображаться с учётом значения overflow . Например, здесь текст «Я вообще не влезаю в эту строку» обрежется, если выйдет за пределы :

 
 
Я вообще не влезаю в эту строку
 
 

Для дочерних элементов можно прописать собственное значение overflow :

 
 
Я вообще не влезаю в эту строку
 
 

В этом примере мы задали дочернему элементу свойство overflow: auto . То есть содержимое будет обрезано, но появится полоса прокрутки.

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Источник