overflow-block

Die overflow-block CSS Eigenschaft legt fest, was angezeigt wird, wenn Inhalt über die Blockanfangs- und Blockende-Kanten eines Kastens hinausgeht. Dies kann nichts, eine Scrollleiste oder der Überlaufinhalt sein.

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

Syntax

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

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

Die overflow-block Eigenschaft wird als einzelner <overflow> Schlüsselwortwert angegeben:

Werte

visible

Inhalt wird nicht abgeschnitten und kann außerhalb der Blockanfangs- und Blockende-Kanten des Padding-Rahmens gerendert werden.

hidden

Inhalt wird, falls erforderlich, abgeschnitten, um in die Blockdimension im Padding-Rahmen zu passen. Es werden keine Scrollleisten bereitgestellt.

clip

Überlaufinhalt wird an der Überlaufklipkante des Elements abgeschnitten, die mit der Eigenschaft overflow-clip-margin definiert ist.

scroll

Inhalt wird, falls erforderlich, abgeschnitten, um in die Blockdimension im Padding-Rahmen zu passen. Browser zeigen Scrollleisten an, unabhängig davon, ob Inhalt tatsächlich abgeschnitten ist oder nicht. (Dies verhindert, dass Scrollleisten erscheinen oder verschwinden, wenn sich der Inhalt ändert.) Drucker könnten dennoch überlaufenden Inhalt drucken.

auto

Hängt vom Benutzeragenten ab. Wenn der Inhalt in den Padding-Rahmen passt, sieht es aus wie visible, aber es wird dennoch ein neuer Block-Formatierungskontext etabliert.

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-block = 
  visible  |
  hidden   |
  clip     |
  scroll   |
  auto

Beispiele

HTML

html
<ul>
  <li>
    <code>overflow-block: hidden</code> (hides the text outside the box)
    <div id="hidden">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block: scroll</code> (always adds a scrollbar)
    <div id="scroll">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block: clip</code> (hides the text outside the box beyond the
    overflow clip edge)
    <div id="clip">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block: visible</code> (displays the text outside the box if
    needed)
    <div id="visible">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block: auto</code> (on most browsers, equivalent to
    <code>scroll</code>)
    <div id="auto">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>

CSS

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

#hidden {
  overflow-block: hidden;
}
#scroll {
  overflow-block: scroll;
}
#scroll {
  overflow-block: clip;
}
#visible {
  overflow-block: visible;
}
#auto {
  overflow-block: auto;
}

Ergebnis

Spezifikationen

Specification
CSS Overflow Module Level 3
# overflow-control

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch