overflow-x

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

/* 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 einzelnes <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 des Randbereichs des Elements auf den linken und rechten Rändern sichtbar sein. Das Elementfeld ist kein scroll container.

hidden

Überlaufender Inhalt wird, falls erforderlich, abgeschnitten, um horizontal in den Randbereich des Elements zu passen. Es werden keine Scrollleisten bereitgestellt.

clip

Überlaufender Inhalt wird am overflow clip edge des Elements abgeschnitten, der mit der Eigenschaft overflow-clip-margin definiert wird. Infolgedessen läuft der Inhalt um den <length>-Wert von overflow-clip-margin oder um 0px, falls nicht festgelegt, über den Randbereich des Elements hinaus. Der Unterschied zwischen clip und hidden besteht darin, dass das Schlüsselwort clip auch jegliches Scrollen, einschließlich programmgesteuertem Scrollen, 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, falls erforderlich, abgeschnitten, um horizontal in den Randbereich des Elements zu passen. Browser zeigen Scrollleisten in horizontaler Richtung an, unabhängig davon, ob Inhalt tatsächlich abgeschnitten wird. (Dies verhindert, dass Scrollleisten erscheinen oder verschwinden, wenn sich der Inhalt ändert.) Drucker können weiterhin überlaufenden Inhalt drucken.

auto

Überlaufender Inhalt wird im Randbereich des Elements abgeschnitten, und überlaufender Inhalt kann in den sichtbaren Bereich 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 Randbereich des Elements passt, sieht es genauso aus wie bei visible, etabliert jedoch trotzdem einen neuen Block-Formatierungskontext. Desktop-Browser stellen Scrollleisten bereit, wenn der Inhalt überläuft.

Formale Definition

Formale Syntax

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

Beispiele

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

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

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