overflow-inline

Die overflow-inline CSS Eigenschaft legt fest, was angezeigt wird, wenn Inhalt die inline Anfänge und Enden eines Rahmens überläuft. Dies kann nichts, eine Bildlaufleiste oder der überlaufende Inhalt sein.

Hinweis: Die Eigenschaft overflow-inline wird je nach Schreibmodus des Dokuments auf overflow-y oder overflow-x abgebildet.

Syntax

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

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

Die Eigenschaft overflow-inline wird als ein einzelnes <overflow> Schlüsselwortwert angegeben.

Werte

visible

Inhalt wird nicht abgeschnitten und kann außerhalb der inline Anfänge und Enden des inneren Abstandsrahmens dargestellt werden.

hidden

Inhalt wird bei Bedarf abgeschnitten, um in die inline Dimension im inneren Abstandsrahmen zu passen. Es werden keine Bildlaufleisten bereitgestellt.

clip

Überlaufender Inhalt wird an der Überlaufrandkante des Elements abgeschnitten, die mit der overflow-clip-margin Eigenschaft definiert ist.

scroll

Inhalt wird bei Bedarf abgeschnitten, um in die inline Dimension des inneren Abstandsrahmens zu passen. Browser zeigen Bildlaufleisten an, unabhängig davon, ob tatsächlich Inhalt abgeschnitten wird oder nicht. (Dies verhindert, dass Bildlaufleisten erscheinen oder verschwinden, wenn sich der Inhalt ändert.) Drucker können überlaufenden Inhalt dennoch drucken.

auto

Abhängig vom Benutzeragenten. Wenn der Inhalt in den inneren Abstandsrahmen passt, sieht er genauso aus wie visible, schafft jedoch dennoch einen neuen Block-Formatierungskontext. Desktop-Browser bieten Bildlaufleisten an, wenn der Inhalt überläuft.

Formale Definition

Anfangswertauto
Anwendbar aufBlock-containers, flex containers, and grid containers
VererbtNein
Berechneter Wertas specified, except with visible/clip computing to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clip
Animationstypdiskret

Formale Syntax

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

Beispiele

Einstellung des Verhaltens bei inline Überlauf

HTML

html
<ul>
  <li>
    <code>overflow-inline: hidden</code> (hides the text outside the box)
    <div id="div1">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: scroll</code> (always adds a scrollbar)
    <div id="div2">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: visible</code> (displays the text outside the box if
    needed)
    <div id="div3">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: auto</code> (equivalent to <code>scroll</code>
    in most browsers)
    <div id="div4">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>

  <li>
    <code>overflow-inline: clip</code> (hides the text outside the box beyond
    the overflow clip edge)
    <code>clip</code>
    <div id="div5">ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ</div>
  </li>
</ul>

CSS

css
div {
  border: 1px solid black;
  width: 250px;
  margin-bottom: 12px;
}

#div1 {
  overflow-inline: hidden;
}
#div2 {
  overflow-inline: scroll;
}
#div3 {
  overflow-inline: visible;
}
#div4 {
  overflow-inline: auto;
}
#div5 {
  overflow-inline: clip;
  overflow-clip-margin: 2em;
}

Ergebnis

Spezifikationen

Specification
CSS Overflow Module Level 3
# overflow-control

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch