Damit Absatztext um ein Bild umfließt, das über den Rand einer Karte hinausragt, lassen Sie das Bild floaten und verwenden Sie einen negativen Außenabstand. Fügen Sie shape-outside für eine gekrümmte Kontur hinzu. Dieses Tutorial erstellt ein vollständiges lokales Beispiel, das Sie auf Ihrem Mac in Safari öffnen können.

Wie fließt Text um ein überlappendes Bild herum?

Das Bild muss am Float-Layout des Absatzes teilnehmen. CSS float positioniert ein Element an einer Seite seines Containers und lässt angrenzenden Text daneben fließen. In diesem Beispiel lässt ein Float nach rechts den Text links davon und anschließend darunter weiterfließen. MDN: float.

Drei Entscheidungen bestimmen das Ergebnis: Der Float erzeugt den Textumfluss, ein negativer rechter Außenabstand lässt das Bild über den Container hinausragen, und shape-outside definiert die Kontur, der der benachbarte Text folgt. Gewöhnliche Floats erzeugen einen rechteckigen Textumfluss; mit einer Form können einzelne Zeilen einem Kreis folgen. MDN: shape-outside.

Ein Bild optisch zu verschieben, reicht nicht aus. Ein absolut positioniertes Bild nimmt im normalen Fluss keinen Platz ein, sodass sich umgebende Elemente so verhalten, als wäre es nicht vorhanden. Eine Verschiebung ändert die gerenderte Position, ohne den normalen Dokumentfluss neu anzuordnen. Deshalb kann ein überlappendes Bild Text verdecken, wenn es mit position: absolute oder transform: translateX(...) positioniert wird. MDN: position, MDN: CSS-Transformationen verwenden.

Die Aufgabe hier ist bewusst genau umrissen: Ein kreisförmiges Bild ragt über den rechten Rand einer Textkarte hinaus, und die Absätze der Karte folgen der linken Kontur des Kreises. Das Bild und die Absätze gehören zum selben Umflussbereich.

Ein vollständiges Beispiel auf Ihrem Mac erstellen

Erstellen Sie in einem einfachen Texteditor eine Datei namens overlap-wrap.html. Fügen Sie das vollständige Dokument unten ein, speichern Sie es und öffnen Sie es in Safari. Das Beispiel enthält eine abstrakte SVG-Grafik als Data-URL, sodass Sie keine Bilddateien, Pakete oder Build-Tools installieren müssen.

Das gefloatete Bild steht vor den Absätzen, die es beeinflussen soll. Diese Platzierung ist wichtig, weil die Positionierung eines Floats durch Inhalte begrenzt wird, die im Dokument vor ihm stehen. Wenn die Überschrift vor dem Float steht, kann sie außerdem die gesamte Textbreite der Karte einnehmen. W3C: Visuelles Formatierungsmodell.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Overlapping image and paragraph wrapping</title>
  <style>
    * { box-sizing: border-box; }
    body {
      margin: 0;
      padding: 32px 96px 32px 32px;
      background: #eef1f5;
      color: #243247;
      font: 18px/1.65 system-ui, sans-serif;
    }
    .card {
      display: flow-root;
      width: 100%;
      max-width: 640px;
      margin: 0 auto;
      padding: 24px;
      background: white;
      box-shadow: 0 0 0 1px #cbd3df;
      overflow: visible;
    }
    .card h2 {
      margin: 0 0 16px;
      font-size: 26px;
      line-height: 1.25;
    }
    .card p { margin: 0 0 16px; }
    .card p:last-child { margin-bottom: 0; }
    .art {
      display: block;
      float: right;
      width: 240px;
      height: 240px;
      margin: 0 -88px 16px 16px;
      border-radius: 50%;
      shape-outside: circle(50%) border-box;
      shape-margin: 16px;
    }
    @media (max-width: 760px) {
      body { padding: 16px; }
      .art {
        float: none;
        width: min(240px, 100%);
        height: auto;
        margin: 0 auto 24px;
        shape-outside: none;
      }
    }
  </style>
</head>
<body>
  <article class="card">
    <h2>Study A: circles and spacing</h2>
    <img class="art" width="240" height="240" alt=""
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Crect width='240' height='240' fill='%233a628b'/%3E%3Ccircle cx='90' cy='85' r='60' fill='%23b9d8eb'/%3E%3Ccircle cx='165' cy='170' r='45' fill='%238db5cc'/%3E%3C/svg%3E">
    <p>Panel A pairs a circular graphic with a continuous passage of
      sample text. Follow the right edge of this paragraph as each
      line approaches the curved outline. Near the widest part of
      the circle, the available space becomes narrower.</p>
    <p>Panel B continues the same passage with a second paragraph.
      The graphic extends into the outer gutter while the words
      remain inside the white card. As the contour curves inward,
      later lines can use more of the available width.</p>
    <p>Panel C provides enough additional text to show the transition
      below the graphic. Once the passage continues beyond the
      wrapping region, its lines return to the full content width.
      Resize the window to compare the desktop arrangement with
      the stacked layout used in a narrower window.</p>
  </article>
</body>
</html>

Bei einem Viewport, der breiter als 760px ist, soll sich eine kreisförmige Grafik in den rechten Zwischenraum erstrecken, während die Absatzzeilen ihrer linken Seite folgen. Bei 760px oder weniger wird das Bild zu einem zentrierten Block oberhalb der Absätze. Der Breakpoint ist eine beispielhafte Designentscheidung; @media wendet die darin enthaltenen Deklarationen an, wenn die Abfrage zutrifft. MDN: @media.

Die Beispielgrafik ist dekorativ, daher verwendet ihr Bildelement alt="". Wenn Sie sie durch eine Grafik ersetzen, die Informationen vermittelt, geben Sie einen passenden Textalternativtext an. WHATWG unterscheidet zwischen dekorativen Bildern und Bildern, deren Informationen textlich wiedergegeben werden müssen. WHATWG: Anforderungen an Textalternativen für Bilder.

Wie wählen Sie den Überstand und den Abstand zum Text?

Beginnen Sie mit der Position des Bildes und passen Sie dann die Kontur an. Ein Float nach rechts wird anhand seiner Randbox positioniert. In diesem Beispiel ragt die rechte Kante des Bildes durch den negativen rechten Außenabstand 88px über die Inhaltskante der Karte hinaus. Die Karte hat 24px rechten Innenabstand, sodass das Bild 64px über den weißen Hintergrund hinausragt. Dies sind für dieses Beispiel abgeleitete Maße in CSS-Pixeln. W3C: Positionierung des Floats.

Größe Beispielwert Berechnung oder Zweck
Bildbreite 240px Durchmesser des angezeigten Kreises
Überstand ab der Inhaltskante 88px Betrag des negativen rechten Außenabstands
Innenabstand der Karte 24px Abstand zwischen Inhaltskante und Hintergrundkante
Sichtbarer Überstand über den Hintergrund hinaus 64px 88 − 24
Im Inhaltsbereich verbleibende Bildbreite 152px 240 − 88
Platzbedarf des rechteckigen Fallbacks 168px 240 − 88 + 16 einschließlich linkem Außenabstand

Berechnen Sie für Ihr eigenes Layout den Betrag des negativen Außenabstands als gewünschten Überstand plus rechten Innenabstand des Containers. Für einen Überstand von 40px bei 24px Innenabstand ist beispielsweise ein rechter Außenabstand von -64px erforderlich. Prüfen Sie die verbleibende Textbreite erneut, wenn Sie das Bild vergrößern oder die Containerbreite verringern.

Die kreisförmige Variante verwendet shape-outside: circle(50%) border-box, damit die Geometrie der quadratischen Bildbox folgt. Hier ist die ausdrückliche Angabe von border-box hilfreich, da die asymmetrischen Außenabstände die Randbox verändern. Ohne eine explizite Referenzbox verwendet eine Grundform standardmäßig margin-box. MDN: Grundformen mit shape-outside.

shape-margin: 16px fügt Abstand um die Umflusskontur hinzu. Der positive linke Außenabstand schafft auf der dem Text zugewandten Seite Platz für diesen Abstand. Formen einschließlich ihrer Formränder werden auf die Randbox des Floats zugeschnitten; eine alleinige Erhöhung von shape-margin kann den Umflussbereich nicht unbegrenzt erweitern. Der negative rechte Außenabstand schneidet die Form auch auf der Außenseite zu, wo dieses Beispiel keinen Absatztext enthält. W3C: CSS Shapes Module Level 1.

Ändern Sie für ein rechteckiges Bild border-radius in 0, shape-outside in none und shape-margin in 0. Behalten Sie Float und Außenabstände bei. So erhalten Sie einen geradlinigen Textumfluss mit derselben Positionierung nach außen. Wenn Sie nur die Form entfernen und den kreisförmigen Zuschnitt beibehalten, bleibt das Bild kreisförmig, der Textabstand jedoch rechteckig.

Welche Containergrenzen beeinflussen den Textumfluss?

Die Karte verwendet display: flow-root, um einen Block-Formatierungskontext zu erstellen, der den Float vertikal einschließt. Dadurch berücksichtigt die Höhe der Karte auch dann das Bild, wenn der Text kurz ist. Außerdem bleibt dieser Umflussbereich von externen Floats unabhängig. MDN: Block-Formatierungskontext.

Lassen Sie die Absätze innerhalb dieses Bereichs im normalen Blockfluss. Ist das Bild ein direktes Flex- oder Grid-Element, sorgt sein Float nicht für diesen Absatzumfluss. Wenn Sie einem separaten Absatz-Wrapper einen eigenen Block-Formatierungskontext geben, wird der externe Float ebenfalls von dessen Inhalt ausgeschlossen. Ein äußeres Grid kann die gesamte Karte positionieren; das Innere der Karte kann weiterhin den normalen Fluss verwenden. MDN: Block-Formatierungskontext.

Prüfen Sie das Abschneiden separat. Das Beispiel lässt den Überlauf sichtbar, damit der Überstand gezeichnet werden kann. Überlauf zur Begrenzung von Floats zu verwenden, kann zu abgeschnittenen Inhalten oder Scrollleisten führen; flow-root schließt Floats ein, ohne dass diese Wahl nötig ist. Überprüfen Sie auch umschließende Komponenten, wenn das Bild genau an der Kante eines übergeordneten Elements verschwindet. MDN: Interne Floats einschließen.

CSS Shapes hat außerdem eine richtungsabhängige Grenze: Ein Float nach rechts ermöglicht den Textumfluss links davon, ein Float nach links den Textumfluss rechts davon. Ein einzelner Float kann keinen Textfluss auf beiden Seiten eines zentrierten Bildes erzeugen. Für diese Aufgabe ist ein Float am Rand die vorgesehene Anordnung. W3C: CSS Shapes und Float-Verhalten.

Können Sie diesen Ansatz mit Tailwind CSS verwenden?

Ja. In einem bestehenden Tailwind-Projekt erzeugt float-right float: right, während float-none den Float aufhebt. Tailwind stellt diese Hilfsklassen bereit; der Browser übernimmt weiterhin den Textumfluss. Tailwind CSS: float.

Für die Konturdeklaration können Sie mit der Syntax für beliebige Eigenschaften von Tailwind [shape-outside:circle(50%)_border-box] und [shape-margin:16px] angeben. Der Unterstrich steht für das Leerzeichen vor border-box. Dies sind Klassenfragmente für ein bereits eingerichtetes Tailwind-Projekt und kein Ersatz für das vollständige Dokument oben. Behalten Sie beim Übertragen dieselben Maße, Außenabstände, Containerlayouts und die Rücksetzung bei schmalen Fenstern bei. Tailwind CSS: Benutzerdefinierte Stile hinzufügen.

Wie finden Sie die Ursache für einen fehlerhaften Textumfluss?

Verwenden Sie das lokale Beispiel als Ausgangspunkt und übernehmen Sie Ihre bestehenden Stile anschließend schrittweise, jeweils eine Änderung auf einmal. Mit dieser Reihenfolge prüfen Sie die Bedingungen, die das Layout bestimmen:

  1. Prüfen Sie zuerst den rechteckigen Textumfluss. Setzen Sie vorübergehend shape-outside: none. Läuft der Text weiterhin unter dem Bild weiter, prüfen Sie, ob das Bild gefloatet oder absolut positioniert ist oder ein direktes Flex-/Grid-Element ist.
  2. Prüfen Sie die Dokumentreihenfolge. Platzieren Sie den Float vor den Absätzen, die um ihn herumfließen sollen.
  3. Prüfen Sie den Umflussbereich. Lassen Sie Float und Absatzinhalt im selben Block-Formatierungskontext; entfernen Sie einen unnötigen eigenen Kontext des Absatz-Wrappers.
  4. Prüfen Sie die Kontur. Stellen Sie den Kreis und seine explizite Referenz border-box wieder her. Vergewissern Sie sich, dass das angezeigte Bild quadratisch ist, bevor Sie es kreisförmig zuschneiden.
  5. Prüfen Sie den Zwischenraum. Vergrößern Sie den Viewport und achten Sie darauf, ob die Karte oder ihre übergeordneten Elemente Inhalte abschneiden. Stellen Sie sicher, dass die Seite genügend Außenraum für den Überstand lässt.
  6. Prüfen Sie das schmale Layout. Ändern Sie die Größe über den Breakpoint des Beispiels hinweg und kontrollieren Sie, ob Float und negativer Außenabstand zurückgesetzt werden.

Diese Prüfungen folgen den dokumentierten Regeln für Float-Positionierung, Formatierungskontexte und Formreferenzboxen. Vermeiden Sie manuelle Zeilenumbrüche, um einzelne Zeilen zu korrigieren; dadurch würde der Text an eine bestimmte Fenstergröße gebunden.

MDN nennt shape-outside weithin verfügbar, weist jedoch darauf hin, dass die Unterstützung einzelner Teile der Syntax variieren kann. Dieses Beispiel verwendet die dokumentierte Form circle(). Vergleichen Sie die Seite in den Mac-Browsern, die Sie unterstützen möchten, und beurteilen Sie Abstand und Lesbarkeit, statt identische Zeilenenden zu verlangen. Ist die Formdeklaration nicht verfügbar, behält der Float den rechteckigen Textumfluss bei. MDN: shape-outside.

Wählen Sie für das fertige Layout Bildgröße und Überstand gemeinsam, lassen Sie genügend Breite für den Textfluss und behalten Sie die gestapelte Fallback-Variante bei. Sobald diese Maße passen, können Sie mit der Kontur den Abstand um das Bild verfeinern. So kann sich der Absatz anpassen, wenn sich Text oder verfügbare Breite ändern.

Quellen