Unsere Freiwilligen haben diesen Artikel noch nicht in Deutsch übersetzt. Machen Sie mit und helfen Sie, das zu erledigen!
Sie können den Artikel auch auf English (US) lesen.

The overflow-x CSS 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.

If overflow-y is hidden, scroll or auto and this property is visible (default) it will implicitly compute to auto.

Syntax

/* 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.

Values

visible
Content is not clipped and may be rendered outside the padding box's left and right edges.
hidden
Content is clipped if necessary to fit horizontally in the padding box. No scrollbars are provided.
scroll
Content is clipped if necessary to fit horizontally in the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content.
auto
Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows.

Formal syntax

visible | hidden | clip | scroll | auto

Examples

HTML

<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>

CSS

#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

Specifications

Specification Status Comment
CSS Overflow Module Level 3
The definition of 'overflow-x' in that specification.
Working Draft

Initial valuevisible
Applies toBlock-containers, flex containers, and grid containers
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 5
Full support 5
Full support 8
Prefixed
Prefixed Requires the vendor prefix: -ms-
Opera Full support 9.5Safari Full support 3WebView Android Full support 1Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also

Schlagwörter des Dokuments und Mitwirkende

Zuletzt aktualisiert von: mfuji09,