CSS
Überlauf

Syntax

• Überlauf: sichtbar | versteckt | scrollen | auto | initial | erben;

Parameter

Bemerkungen

Überlauf: blättern

HTML

<div>
    This div is too small to display its contents to display the effects of the overflow property.
</div>

CSS

div {
    width:100px;
    height:100px;
    overflow:scroll;
}

Ergebnis

Der oben aufgeführte Inhalt wird in ein 100 x 100 Pixel großes Feld geschnitten, wobei Bildlauf zur Anzeige überlaufender Inhalte möglich ist.

Die meisten Desktop-Browser zeigen sowohl horizontale als auch vertikale Bildlaufleisten an, unabhängig davon, ob Inhalte abgeschnitten werden. Dadurch können Probleme mit Bildlaufleisten in einer dynamischen Umgebung vermieden werden. Drucker drucken möglicherweise überlaufende Inhalte.

Überlaufwickel

overflow-wrap teilt einem Browser mit, dass er eine Textzeile innerhalb eines Zielelements in mehrere Zeilen an einem ansonsten unzerbrechlichen Ort aufteilen kann. Hilfreich bei der Vermeidung einer langen Textfolge, die Layoutprobleme verursacht, weil der Container überläuft.

CSS

div {
    width:100px;
    outline: 1px dashed #bbb;
}

#div1 {
    overflow-wrap:normal;
}

#div2 {
    overflow-wrap:break-word;
}

HTML

<div id="div1">
      <strong>#div1</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> is too long so it will overflow past the edge of the line-break
</div>

<div id="div2">
      <strong>#div2</strong>: Small words are displayed normally, but a long word like <span style="red;">supercalifragilisticexpialidocious</span> will be split at the line break and continue on the next line.
</div>

Überlauf: sichtbar

HTML

<div>
     Even if this div is too small to display its contents, the content is not clipped.
</div>

CSS

div {
     width:50px;
     height:50px;
     overflow:visible;
}

Ergebnis

Inhalt wird nicht abgeschnitten und außerhalb des Inhaltsrahmens angezeigt, wenn er die Containergröße überschreitet.

Block-Formatierungskontext, der mit Überlauf erstellt wurde

Wenn Sie die overflow Eigenschaft mit einem anderen Wert als visible wird ein neuer Blockformatierungskontext erstellt . Dies ist nützlich, wenn Sie ein Blockelement neben einem schwebenden Element ausrichten möchten.

CSS

img {
    float:left;
    margin-right: 10px;
}
 div {
     overflow:hidden; /* creates block formatting context */
}

HTML

<img src="http://placehold.it/100x100">
<div>
  <p>Lorem ipsum dolor sit amet, cum no paulo mollis pertinacia.</p>
  <p>Ad case omnis nam, mutat deseruisse persequeris eos ad, in tollit debitis sea.</p>
</div>

Ergebnis

Dieses Beispiel zeigt, wie Absätze innerhalb eines div mit der Eigenschaft " overflow mit einem schwebenden Bild interagieren.

Überlauf-x und Überlauf-y

Diese beiden Eigenschaften arbeiten auf ähnliche Weise wie die overflow und akzeptieren dieselben Werte. Der Parameter overflow-x funktioniert nur für die x- oder die Links-Rechts-Achse. Der overflow-y arbeitet auf der y-Achse oder von oben nach unten.

HTML

<div id="div-x">
    If this div is too small to display its contents, 
    the content to the left and right will be clipped.
</div>

<div id="div-y">
    If this div is too small to display its contents, 
    the content to the top and bottom will be clipped.
</div>

CSS

div {
    width: 200px;
    height: 200px;
}

#div-x {
    overflow-x: hidden;
}

#div-y {
    overflow-y: hidden;
}