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 ein einzelnes <overflow> Schlüsselwortwert angegeben.

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

Werte

visible

Überlaufender Inhalt wird nicht abgeschnitten und kann außerhalb des Padding-Box des Elements auf den linken und rechten Rändern sichtbar sein. Der Element-Box ist kein Scroll-Container.

hidden

Überlaufender Inhalt wird abgeschnitten, wenn nötig, um horizontal in die Padding-Box des Elements zu passen. Scrollleisten werden nicht bereitgestellt.

clip

Überlaufender Inhalt wird an der overflow clip edge des Elements abgeschnitten, die mit der overflow-clip-margin Eigenschaft definiert ist. Infolgedessen überläuft der Inhalt die Padding-Box des Elements um den <length> Wert von overflow-clip-margin oder um 0px, wenn nicht gesetzt. Der Unterschied zwischen clip und hidden besteht darin, dass das clip Schlüsselwort jegliches Scrollen, einschließlich des programmgesteuerten Scrollens, verbietet. Es wird kein neuer Formatierungskontext erstellt. Um einen Formatierungskontext herzustellen, verwenden Sie overflow: clip zusammen mit display: flow-root. Der Element-Box ist kein Scroll-Container.

scroll

Überlaufender Inhalt wird gegebenenfalls abgeschnitten, um horizontal innerhalb der Padding-Box des Elements zu passen. Browser zeigen Scrollleisten in horizontaler Richtung an, unabhängig davon, ob tatsächlich Inhalt abgeschnitten wird oder nicht. (Dies verhindert, dass Scrollleisten erscheinen oder verschwinden, wenn sich der Inhalt ändert.) Drucker können weiterhin überlaufenden Inhalt drucken.

auto

Überlaufender Inhalt wird an der Padding-Box des Elements abgeschnitten, und überlaufender Inhalt kann in den Sichtbereich gescrollt werden. Im Gegensatz zu scroll zeigen Benutzeragenten Scrollleisten nur an, wenn der Inhalt überläuft und verstecken Scrollleisten standardmäßig. Wenn der Inhalt innerhalb der Padding-Box des Elements passt, sieht es genauso aus wie bei visible, stellt aber dennoch einen neuen Block-Formatierungskontext her. Desktop-Browser bieten Scrollleisten, 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