overflow

CSS overflow Property

The overflow property specifies what should happen if content overflows an element’s box.

This property specifies whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area.

Note: The overflow property only works for block elements with a specified height.

Default value:	visible
Inherited:	no
Animatable:	no. Read about animatable
Version:	CSS2
JavaScript syntax:	object.style.overflow=»scroll» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Note: In OS X Lion (on Mac), scrollbars are hidden by default and only shown when being used (even though «overflow:scroll» is set).

CSS Syntax

Property Values

Value	Description	Demo
visible	The overflow is not clipped. It renders outside the element’s box. This is default	Demo ❯
hidden	The overflow is clipped, and the rest of the content will be invisible. Content can be scrolled programmatically (e.g. by setting scrollLeft or scrollTo())	Demo ❯
clip	The overflow is clipped, and the rest of the content will be invisible. Forbids scrolling, including programmatic scrolling.	Demo ❯
scroll	The overflow is clipped, but a scroll-bar is added to see the rest of the content	Demo ❯
auto	If overflow is clipped, a scroll-bar should be added to see the rest of the content	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Источник

overflow

The overflow CSS shorthand property sets the desired behavior when content does not fit in the parent element box (overflows) in the horizontal and/or vertical direction.

Try it

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Keyword values */ overflow: visible; overflow: hidden; overflow: clip; overflow: scroll; overflow: auto; overflow: hidden visible; /* Global values */ overflow: inherit; overflow: initial; overflow: revert; overflow: revert-layer; overflow: unset; 

Values

Overflow content is not clipped and may be visible outside the element’s padding box. The element box is not a scroll container. This is the default value of the overflow property.

Overflow content is clipped at the element’s padding box. There are no scroll bars, and the clipped content is not visible (i.e., clipped content is hidden), but the content still exists. User agents do not add scroll bars and also do not allow users to view the content outside the clipped region by actions such as dragging on a touch screen or using the scroll wheel on a mouse. The content can be scrolled programmatically (for example, by setting the value of the scrollLeft property or the scrollTo() method), in which case. The element box is a scroll container.

Overflow content is clipped at the element’s overflow clip edge that is defined using the overflow-clip-margin property. As a result, content overflows the element’s padding box by the value of overflow-clip-margin or by 0px if not set. Overflow content outside the clipped region is not visible, user agents do not add a scroll bar, and programmatic scrolling is also not supported. No new formatting context is created. To establish a formatting context, use overflow: clip along with display: flow-root . The element box is not a scroll container.

Overflow content is clipped at the element’s padding box, and overflow content can be scrolled into view using scroll bars. User agents display scroll bars in both horizontal and vertical directions if only one value is set, whether or not any content is overflowing or clipped. The use of this keyword, therefore, can prevent scroll bars from appearing and disappearing as content changes. Printers may still print overflowing content. The element box is a scroll container.

Overflow content is clipped at the element’s padding box, and overflow content can be scrolled into view. Unlike scroll , user agents display scroll bars only if the content is overflowing and hide scroll bars by default. If content fits inside the element’s padding box, it looks the same as with visible but still establishes a new formatting context. The element box is a scroll container.

Note: The keyword value overlay is a legacy value alias for auto . With overlay , the scroll bars are drawn on top of the content instead of taking up space.

Description

Overflow options include hiding overflowing content, enabling scroll bars to view overflow content or displaying the content flowing out of an element box into the surrounding area, and combinations there of.

The following nuances should be kept in mind while using the various keywords for overflow :

• Specifying a value other than visible (the default) or clip for overflow creates a new block formatting context. This is necessary for technical reasons; if a float intersects with a scrolling element, it would forcibly rewrap the content after each scroll step, leading to a slow scrolling experience.
• For an overflow setting to create the desired effect, the block-level element must have either a set height ( height or max-height ) or white-space set to nowrap .
• Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto .
• The JavaScript Element.scrollTop property may be used to scroll through content in a scroll container, including when overflow is set to hidden .

Formal definition

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

Formal syntax

overflow =
[ visible | hidden | clip | scroll | auto ]

Examples

Demonstrating results of various overflow keywords

HTML

div> code>visiblecode> p class="visible"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>hiddencode> p class="hidden"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>clipcode> p class="clip"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>scrollcode> p class="scroll"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>autocode> p class="auto"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> div> code>overlaycode> p class="overlay"> Maya Angelou: "I've learned that people will forget what you said, people will forget what you did, but people will never forget how you made them feel." p> div> 

CSS

body  display: flex; flex-wrap: wrap; justify-content: start; > div  margin: 2em; font-size: 1.2em; > p  width: 5em; height: 5em; border: dotted; margin-top: 0.5em; > div:nth-of-type(5), div:nth-of-type(6)  margin-top: 200px; > 

p.visible  overflow: visible; > p.hidden  overflow: hidden; > p.clip  overflow: clip; overflow-clip-margin: 1em; > p.scroll  overflow: scroll; > p.auto  overflow: auto; > p.overlay  overflow: overlay; > 

Result

Accessibility concerns

A scrolling content area cannot be scrolled by a keyboard-only user, with the exception of users on Firefox (which makes the container keyboard focusable by default).

As a developer, to allow non-Firefox keyboard-only users to scroll the container, you will need to give it a tabindex using tabindex=»0″ . Unfortunately, when a screen reader encounters this tab-stop, they will have no context for what it is and their screen reader will likely announce the entirety of its contents. Giving it an appropriate WAI-ARIA role ( role=»region» , for example) and an accessible name (via aria-label or aria-labelledby ) can mitigate this.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

overflow

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

Синтаксис

overflow: auto | hidden | scroll | visible | inherit

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Duis te feugifacilisi 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 
  

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

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

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

[window.]document.getElementById(» elementID «).style.overflow

Браузеры

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

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

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

Источник

overflow

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

Синтаксис

overflow: auto | hidden | scroll | visible | inherit

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Duis te feugifacilisi 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 
  

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

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

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

[window.]document.getElementById(» elementID «).style.overflow

Браузеры

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

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

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

Источник