Overflow - Property CSS

overflow syntax schema.

Description of the schema:

• overflow accepts one or two values ​​separated by a space. If two values ​​are specified, the first refers to the overflow in the horizontal direction and the second to the vertical direction. If only one value is specified, it applies to both vertical and horizontal overflows.

What does the CSS property overflow correspond to?

overflow is a property of the CSS language. It defines how the web browser should behave when a content is larger than the space reserved for it.

In other words, overflow defines whether content larger than the reserved space is still visible (overflow), whether it is hidden, or whether it can scroll at the reader's request. Setting up scroll bars is interesting on the screen in order to save space, but you have to think of another solution when printing because the content would then be permanently invisible. The value associated with overflow will therefore often be different depending on the device used: see the @media directive to solve this problem.

overflow works on elements with height, and possibly width properties set, otherwise the element expands to fit the content and there is never any overflow.

It should be noted that displaying scroll bars is done at the expense of the space reserved for the content. In other words, scroll bars do not enlarge the external dimensions of the element.

The technique of hiding content by enclosing it in an element that is too small, so that it is invisible to the reader but visible to search engines, is bad practice. The standard requires browsers to completely remove non-visible and non-scrollable content.

See also the text-overflow property for displaying a symbol indicating that the content is clipped, and the overflow-clip-margin property for setting overflow margins.

overflow is a shorthand property equivalent to the following two properties:

• overflow-x: horizontal overflow management.
• overflow-y: vertical overflow management.

Equivalent logical properties.

Overflow can also be handled by the following two logical properties, which are dependent on the writing mode of the language (see the writing-mode property for more information on the writing mode).

• overflow-inline: overflow management in the main direction (line direction for latin languages).
• overflow-block: overflow management in block direction (vertical for Latin languages).

The correspondence with physical properties in each language is illustrated below.

Values for overflow.

• overflow: visible;

  The content is displayed in full, even if it exceeds the dimensions defined for its block, at the risk of colliding with the elements that follow.

  This text overflows the dimensions of the element. But its content is still displayed, at the risk of colliding with the elements that follow.
  overflow:visible;
• overflow: hidden;

  Content that exceeds the reserved space is not displayed. The browser is not supposed to offer scroll bars to display the part of the content that is hidden and should not allow scrolling by other means (mouse wheel, keyboard shortcut, etc.). The reader therefore has no way of displaying the hidden content: this must however be possible programmatically (in Javascript code for example).

  This text overflows the dimensions of the element. The overflowing content is hidden, it is not possible for the reader to make it appear.
  overflow:hidden;
• overflow: clip; ⚠

  As with the hidden value, content that extends beyond the placeholder is not displayed and the reader has no way to scroll through it: no scroll bars, keyboard shortcuts and mouse wheel disabled. It should also not be possible to scroll programmatically through the content (this is the difference with the hidden value).

  This text overflows the dimensions of the element. The overflowing content is hidden, it is not possible for the reader to make it appear.
  overflow:clip;
• overflow: scroll;

  Overflowing content is hidden, but it is possible to make it appear using the scroll bars displayed by the browser. These should remain visible even if the content is displayed in full and therefore does not need to be scrolled. This option is interesting because the scroll bars always occupy the same space, the space reserved for the content is unchanged. It is therefore not necessary to recalculate the text layout when the scroll bars become necessary.

  This text overflows the element's dimensions. The overflowing content is hidden but can be displayed with the scrollbars still present.
  overflow:scroll;
• overflow: auto;

  Scroll bars allow you to scroll hidden content, but these bars only appear if the content overflows the space reserved for this element. The space reserved for the content itself can therefore be modified when the scroll bars appear, which causes a recalculation of the content layout.

  There is however a way to prevent the appearance of scroll bars from changing the space reserved for the content, it is to define an inner margin (padding) on the right and bottom of the element. Indeed, the space necessary for the scroll bars is taken from the inner margins.

  By adjusting the dimensions of this element, you can make the text overflow the dimensions of the element. Scroll bars are then displayed when needed.
  overflow:auto
• overflow: overlay; ✗

  As for the auto value: scroll bars are displayed if and only if the content overflows the reserved space. But the scroll bars are displayed over the content, without reducing the space reserved for the latter. On the other hand, of course, a small part of the content may be hidden by the scroll bars.
  This value is not standardized: it is only processed by Chrome and a few other browsers.

  By adjusting the dimensions of this element, you can make the text overflow the dimensions of the element. Scroll bars will then appear over the content.
  overflow:overlay
• overflow: hidden scroll;

  Example syntax defining different handling of horizontal overflow and vertical overflow. The two values ​​are separated by a space.

• overflow: -moz-hidden-unscrollable; ✗

  These values ​​were proposed by browsers using the Mozilla engine (Firefox...). They were not retained in the standard. Use their standardized equivalent:

  -moz-scrollbars-none replaced byhidden.
  -moz-scrollbars-horizontal replaced by overflow-x: scroll.
  -moz-scrollbars-vertical replaced by overflow-y: scroll.
  -moz-hidden-unscrollable replaced by hidden..

• overflow: initial; (visible ) overflow: inherit; overflow: revert; overflow: revertLayer; overflow: unset;

  These values ​​are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

Example with overflow.

It often happens that you have to scroll through the content of a table, but without losing the headers and footers. It is possible, provided display the table sections (the thead, tbody, and tfoot) as blocks. You will also need to set the width of all the columns on each of these sections.

Animation of the overflow property.

The animation of overflow is not very interesting. The example below mainly illustrates the fact that the presence of scroll bars (especially the one for vertical scrolling) requires recalculating the distribution of the text in the block, since the space reserved for the content is reduced by the width of the bars.

Manipulating the overflow property with Javascript.

With Javascript, change the value of overflow.

In Javascript, here are two code examples to modify the value of overflow.

let el = document.getElementById('id'); el.style['overflow'] = 'clip'; // or let el = document.getElementById('id'); el.style.overflow = 'clip';

With Javascript, read the value of overflow.

This code example works if the property was assigned directly to the element itself via its style attribute, and not through a CSS selector.

let el = document.getElementById('id'); let value = el.style['overflow']; // or let el = document.getElementById('id'); let value = el.style.overflow;

With Javascript, read the calculated value of overflow.

The computed value is the one resulting from the cascade of inheritances, or, failing that, it will be the initial value (visible in the case of overflow).

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('overflow');

With JQuery, change the value of overflow.

jQuery also allows you to manipulate property values, with syntaxes that are generally shorter than those of Javascript.


$('#id').css('overflow', 'clip');


With JQuery, read the calculated value of overflow.

let value = $('#id').css('overflow');

Other code examples.

See more Javascript and JQuery code examples on the Javascript and CSS page.

Test it yourself.

The buttons below apply the entered value to the overflow property and then display either the value as it was applied, or the calculated value. In the case of overflow it will be the same because this property only accepts predefined values.

Simulator for the overflow shorthand property.

The dimensions of the element are materialized by a light blue background. We see that the content, whether text or image, does not fit into these dimensions. Observe the effect of the overflow property on the part of the content that overflows.

You can adjust the dimensions of the elements to observe the slight differences between certain values ​​like between overlay and scroll.

Effect of overflow on an element containing text.

Effect of overflow on an element containing an image.

Simulator with writing direction management.

Effect of logical properties on an element containing text.

Browsers compatibility.

The overflow property is well supported by all browsers. However, be careful with the overlay value which still suffers from compatibility issues.

On the other hand, the logical properties overflow-block and overflow-inline are only processed by Firefox (2024).

Notes:

(1) The overlay value is recognized but has the same effect as auto.

1

overflow
shorthand
property

2

overflow-x
overflow-y
properties

3

overflow-block
overflow-inline
properties

4

overlay
value
 

Estimated overall support.

96%

96%

69%

7%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

Opéra

1

QQ Browser

Safari

1

Safari sur IOS

1

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Chrome

1

Edge

1

Firefox

Androïd Brower

1

Chrome pour Androïd

1

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Caniuse

Caniuse

Caniuse

overflow property history.

• Cascading Style Sheets Level 2 - Revision 1 Specification

  Introduction of the overflow property in version 2.xx of the CSS language.
  The property accepts only one value, valid for both horizontal and vertical overflow.
  

  November 04, 1997

  Working Draft.

  

  March 24, 1998

  Proposed for recommendation.

  

  May 11, 1998

  Recommendation .

• CSS Overflow Module Level 3

  The overflow property becomes a shorthand property for overflow-x and overflow-y. This allows horizontal overflow and vertical overflow to be managed separately.
  Introduction of logical properties to handle overflow: overflow-inline and overflow-block
  

  April 18, 2013

  Working Draft.

  

  

  

• CSS Overflow Module Level 4

  No change to overflow properties.
  

  June 13, 2017

  Working Draft.

  

  

  

See also, regarding overflow management.

The CSS Overflow Module specification module groups together everything related to overflows (content larger than the reserved space). The overflow property, as well as the following ones, are described in this module.

Properties:

⚠

block-ellipsis

Manages the display of a suite marker at the end of an element when the content overflows the item.

overflow-block

Management of excesses in the secondary direction.

overflow-clip-margin

Sets the overflow margin, when the content is larger than the element.

overflow-inline

Management of overflows in the main direction.

overflow-x

Horizontal overflow management.

overflow-y

Vertical overflow management.

scroll-behavior

Chooses between a rough or gradual scrolling of the page.

scrollbar-gutter

Whether or not to reserve the gutter for a scroll bar.

text-overflow

Sets the text overflow indicator.