Theoverflow-x
CSS property sets what shows when content overflows a block-level element's left and right edges. This may be nothing, a scroll bar, or the overflow content.
If overflow-y
is hidden
, scroll
or auto
and this property is visible
(default) it will implicitly compute to auto
.
/* Keyword values */ overflow-x: visible; overflow-x: hidden; overflow-x: scroll; overflow-x: auto; /* Global values */ overflow-x: inherit; overflow-x: initial; overflow-x: unset;
The overflow-x
property is specified as a single keyword chosen from the list of values below.
visible
hidden
scroll
auto
visible
, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows.visible | hidden | clip | scroll | auto
<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 adds 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>
#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;}
Specification | Status | Comment |
---|---|---|
CSS Overflow Module Level 3 The definition of 'overflow-x' in that specification. | Working Draft |
Initial value | visible |
---|---|
Applies to | Block-containers, flex containers, and grid containers |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 1 | 12 | 3.5 | 5
|
9.5 | 3 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 1 | Yes | Yes | 4 | Yes | Yes | Yes |
text-overflow
, white-space
, overflow
, overflow-y
, clip
, display
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x