CSS - overflow-x
The overflow-x
property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges.
Examples
HTML
HTML
Copy Code
<ul> <li><code>overflow-x:hidden</code> — hides the text outside the box <div id="div1"> ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ </div> </li> <li><code>overflow-x:scroll</code> — always add a scrollbar <div id="div2"> ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ </div> </li> <li><code>overflow-x:visible</code> — displays the text outside the box if needed <div id="div3"> ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ </div> </li> <li><code>overflow-x:auto</code> — on most browsers, equivalent to <code>scroll</code> <div id="div4"> ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ </div> </li> </ul>
CSS
CSS
Copy Code
#div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-x: hidden;} #div2 { overflow-x: scroll;} #div3 { overflow-x: visible;} #div4 { overflow-x: auto;}
Result
Syntax
CSS
Copy Code
/* Content is not clipped */ overflow-x: visible; /* Content is clipped, with no scrollbars */ overflow-x: hidden; /* Content is clipped, with scrollbars */ overflow-x: scroll; /* Let the browser decide */ overflow-x: auto; /* Global values */ overflow-x: inherit; overflow-x: initial; overflow-x: unset;
Values
visible
- Content is not clipped, it may be rendered outside the content box.
hidden
- The content is clipped and no scrollbars are provided.
scroll
- The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.
auto
- Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.
Formal syntax
CSS
Copy Code
visible <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> hidden <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> scroll <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> auto
Description
The overflow-x
property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges.
Initial value | visible |
---|---|
Applies to | non-replaced block-level elements and non-replaced inline-block elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animatable | no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 3.5 (1.9.1) | 5.0[1] | 9.5 | 3.0 |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.9.1) | (Yes) | (Yes) | (Yes) |
[1] Internet Explorer 8 introduced -ms-overflow-x
as a synonym for overflow-x
. Don't use the -ms-
prefix.
See Also
- Related CSS properties:
text-overflow
,white-space
,overflow
,overflow-y
,clip
,display
Specifications
Specification | Status | Comment |
---|---|---|
CSS Overflow Module Level 3 The definition of 'overflow-x' in that specification. |
Working Draft | |
CSS Basic Box Model The definition of 'overflow-x' in that specification. |
Working Draft | Initial definition |
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/overflow-x