overflow-x

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2020.

Die overflow-x CSS Eigenschaft legt fest, was angezeigt wird, wenn der Inhalt die linken und rechten Ränder eines Block-Elements überläuft. Dies kann nichts sein, eine Scrollleiste oder der überlaufende Inhalt. Diese Eigenschaft kann auch mit der overflow Kurzschrift-Eigenschaft festgelegt werden.

Probieren Sie es aus

overflow-x: visible;

overflow-x: hidden;

overflow-x: clip;

overflow-x: scroll;

overflow-x: auto;

<section class="default-example" id="default-example">
  <div id="example-element">
    The value of Pi is 3.1415926535897932384626433832795029. The value of e is
    2.7182818284590452353602874713526625.
  </div>
</section>

#example-element {
  width: 15em;
  height: 9em;
  border: medium dotted;
  padding: 0.75em;
  text-align: left;
}

Syntax

css

/* Keyword values */
overflow-x: visible;
overflow-x: hidden;
overflow-x: clip;
overflow-x: scroll;
overflow-x: auto;

/* Global values */
overflow-x: inherit;
overflow-x: initial;
overflow-x: revert;
overflow-x: revert-layer;
overflow-x: unset;

Die overflow-x Eigenschaft wird als ein einzelner <overflow> Schlüsselwortwert angegeben.

Wenn overflow-y hidden, scroll oder auto ist und die overflow-x Eigenschaft visible (Standard) ist, wird der Wert implizit als auto berechnet.

Werte

visible: Überlaufender Inhalt wird nicht abgeschnitten und kann außerhalb der Ränder des Elements sichtbar sein. Das Elementfeld ist kein Scroll-Container.
hidden: Überlaufender Inhalt wird bei Bedarf abgeschnitten, um horizontal in den Padding-Bereich des Elements zu passen. Es werden keine Scrollleisten bereitgestellt.
clip: Überlaufender Inhalt wird am overflow-clip-Rand des Elements abgeschnitten, der mit der overflow-clip-margin Eigenschaft definiert wird. Infolgedessen überläuft der Inhalt den Padding-Bereich des Elements um den <length> Wert von overflow-clip-margin oder um 0px, wenn nicht festgelegt. Der Unterschied zwischen clip und hidden besteht darin, dass das clip Schlüsselwort auch jegliches Scrollen, einschließlich programmierten Scrollens, verbietet. Es wird kein neuer Formatierungskontext erstellt. Um einen Formatierungskontext zu etablieren, verwenden Sie overflow: clip zusammen mit display: flow-root. Das Elementfeld ist kein Scroll-Container.
scroll: Überlaufender Inhalt wird bei Bedarf abgeschnitten, um horizontal in den Padding-Bereich des Elements zu passen. Browser zeigen horizontale Scrollleisten an, unabhängig davon, ob tatsächlich Inhalt abgeschnitten wird oder nicht. (Dies verhindert, dass Scrollleisten angezeigt oder ausgeblendet werden, wenn sich der Inhalt ändert.) Drucker können überlaufenden Inhalt trotzdem drucken.
auto: Überlaufender Inhalt wird am Padding-Bereich des Elements abgeschnitten und der überlaufende Inhalt kann in den Sichtbereich gescrollt werden. Im Gegensatz zu scroll zeigen Benutzeragenten Scrollleisten nur an, wenn der Inhalt überläuft, und verbergen Scrollleisten standardmäßig. Wenn der Inhalt in den Padding-Bereich des Elements passt, sieht es genauso aus wie bei visible, erstellt jedoch trotzdem einen neuen Block-Formatierungskontext. Desktop-Browser bieten Scrollleisten an, wenn der Inhalt überläuft.

Hinweis: Der Schlüsselwortwert overlay ist ein veralteter Wertalias für auto. Bei overlay werden die Scrollleisten über dem Inhalt gezeichnet, anstatt Platz einzunehmen.

Formale Definition

Anfangswert	`visible`
Anwendbar auf	Block-containers, flex containers, and grid containers
Vererbt	Nein
Berechneter Wert	as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` or `overflow-y` is neither `visible` nor clip
Animationstyp	diskret

Formale Syntax

overflow-x = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

Beispiele

HTML

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

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

Ergebnis

Spezifikationen

Specification
CSS Overflow Module Level 3 # overflow-properties

Browser-Kompatibilität

Siehe auch

clip, display, text-overflow, white-space
CSS overflow Modul
Lernen: Überlaufender Inhalt