Um Padding an beiden Enden jeder umgebrochenen Highlight-Zeile beizubehalten, wenden Sie box-decoration-break: clone auf ein Inline-Element an, zusammen mit dessen Hintergrund und Padding. Fügen Sie die WebKit-präfixierte Deklaration für Safari hinzu. MDN erklärt Fragment-Dekoration.

Diese Anleitung richtet sich an jemanden, der auf einem Mac eine Webseite bearbeitet und möchte, dass ein hervorgehobener Textabschnitt sich natürlich innerhalb einer Überschrift oder eines Absatzes umbricht. Die Aufgabe besteht darin, jeder resultierenden Zeile ihren eigenen gepaddeten Hintergrund zu geben, während der Zeilenumbruch dem Browser überlassen bleibt.

Warum verschwindet das Padding dort, wo der Highlight umbricht?

Der Initialwert von box-decoration-break ist slice. Wenn ein Inline-Box über Zeilen hinweg bricht, behandelt dieser Wert seine Dekoration als kontinuierliche Box, die in Fragmente geschnitten wird. Padding wird an den gebrochenen Kanten nicht eingefügt. Mit clone erhält jedes Fragment sein eigenes Padding, seinen eigenen Rand und seine eigene Hintergrund-Dekoration. W3C definiert beide Fragmentierungsverhalten.

Diese Unterscheidung erklärt ein häufiges Ergebnis: Mehr horizontales Padding macht Anfang und Ende der gesamten Phrase geräumiger, aber die Kanten der dazwischenliegenden Zeilen sehen weiterhin eng aus. Die fehlende Einstellung steuert, was an diesen Brüchen passiert; das Erhöhen des Paddings allein ändert daran nichts.

Behalten Sie den Highlight als Inline-Box bei. Ein Block-Hintergrund dekoriert das enthaltende Rechteck, während ein Inline-Highlight dem Textfluss folgt. MDN dokumentiert das unterschiedliche Größen- und Abstandsverhalten von Block-, Inline- und Inline-Block-Boxen. Siehe MDNs Box-Modell-Anleitung.

Erstellen Sie ein vollständiges Beispiel auf Ihrem Mac

Erstellen Sie in einem Code-Editor eine Textdatei namens wrapped-highlight.html, fügen Sie das vollständige Beispiel unten ein und speichern Sie sie. Öffnen Sie die Datei in Ihrem Desktop-Browser. Keine Paketinstallation, kein externes Stylesheet und kein JavaScript erforderlich.

Die synthetische Überschrift stellt eine einfache Seiteneinführung dar. Ein Span umgibt die gesamte dekorierte Phrase. WHATWG definiert das span-Element als generischen Text-Container ohne eigene Bedeutung, was es für diese rein visuelle Gruppierung geeignet macht. Lesen Sie die span-Definition im HTML Standard.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wrapped highlight example</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 2rem;
      background: #ffffff;
      color: #202020;
      font-family: system-ui, sans-serif;
    }

    .sample {
      max-width: 26rem;
      margin: 0 auto;
    }

    .sample-title {
      margin: 0;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.65;
    }

    .highlight {
      display: inline;
      background-color: #ffe6a6;
      padding: 0.08em 0.3em;
      border-radius: 0.15em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  </style>
</head>
<body>
  <main class="sample">
    <h1 class="sample-title"><span class="highlight">Amber tiles and silver circles arranged across a sample page</span></h1>
  </main>
</body>
</html>

Verringern Sie die Breite des Browserfensters, bis die Überschrift umbricht, und weiten Sie es dann wieder. Untersuchen Sie Anfang und Ende jeder hervorgehobenen Zeile. Das beabsichtigte Ergebnis ist ein separater, gepaddeter Hintergrund-Fragment um jede Zeile, mit derselben Behandlung, die sich fortsetzt, während sich der Umbruch ändert. MDNs Beispiele verwenden dasselbe Paar aus präfixierter und Standard-Deklaration. Siehe die dokumentierte Syntax und Beispiele.

Die Dimensionen hier sind illustrative Designentscheidungen. Beginnen Sie damit, das horizontale Padding 0.3em zu ändern, wenn die Enden zu eng oder zu weit wirken. Ändern Sie das vertikale Padding 0.08em separat. Halten Sie den Umbruch-Test aktiv, während Sie einen der Werte anpassen.

Zum Vergleich der Verhaltensweisen ändern Sie beide Deklarations-Deklarationen vorübergehend von clone zu slice, speichern Sie und laden Sie neu. Stellen Sie beide anschließend wieder auf clone zurück. Das Ändern beider vermeidet, dass der Vergleich davon abhängt, welche Deklaration Ihr Browser erkennt.

Welche Browser-Support-Details sind auf dem Mac relevant?

Behalten Sie beide Deklarationen im Beispiel bei. MDNs aktuelle Kompatibilitätsdaten verzeichnen Standard-Eigenschafts-Support ab Chrome 130 und Firefox 32. Sie verzeichnen Safari-Support mit dem -webkit--Präfix und begrenzen diese Implementierung auf Inline-Elemente. Prüfen Sie MDNs Browser-Kompatibilitätsdaten.

Diese Inline-Beschränkung passt zu dieser Aufgabe: Ein Textabschnitt, der über Textzeilen hinweg bricht, ist Inline-Fragmentierung. Sie stellt keine gleichwertige Unterstützung für einen Block dar, der über Spalten oder gedruckte Seiten fragmentiert. Behalten Sie diese Layout-Fälle bei der Auswertung des Ergebnisses getrennt.

Testen Sie die Datei in den Mac-Browsern, die für Ihre Seite relevant sind. Verwenden Sie ein schmales und ein breites Fenster, vergrößern Sie dann den Seitentext und wiederholen Sie den Test. Behandeln Sie die Anzahl der Zeilen als variabel; Ihre Akzeptanzbedingung ist konsistentes Padding auf den Fragmenten, die jeder Browser tatsächlich produziert.

Wenn eine Umgebung keine der Deklarationen erkennt, wird die Per-Zeilen-Klon-Verbesserung nicht verfügbar sein. Halten Sie den zugrunde liegenden Text und Hintergrund nutzbar, oder wählen Sie eine gepaddete Block-Behandlung, wenn ein einzelner rechteckiger Hintergrund die Designanforderung erfüllt. Das ändert das Erscheinungsbild, daher sollte es eine explizite Designentscheidung sein.

Wie verhindern Sie überlappende Hintergründe und ungeschicktes Umbrechen?

Padding und Zeilenabstand lösen unterschiedliche Probleme. Bei einer normalen Inline-Box können oberes und unteres Padding den bemalten Bereich erweitern, ohne umliegenden Inhalt wegzuschieben. Folglich kann das Erhöhen des vertikalen Paddings dazu führen, dass benachbarte hervorgehobene Zeilen sich überlappen. MDN dokumentiert dieses Inline-Box-Verhalten explizit. Siehe Inline-Padding und umliegenden Inhalt.

Passen Sie die line-height der Überschrift zusammen mit dem vertikalen Padding des Highlights an. Das Beispiel verwendet einen bewusst großzügigen 1.65 als Ausgangspunkt. Verringern Sie ihn schrittweise, wenn die Lücken übermäßig wirken, und prüfen Sie jedes Mal das schmalste Layout. Es gibt keinen einzelnen Abstandswert, der für jede Schrift und Dekoration passt.

Verwenden Sie diese Diagnose-Sequenz, um die Ursache zu identifizieren, bevor Sie mehr CSS ändern:

Was Sie sehen Zuerst prüfen Nächste Aktion
Padding existiert nur an den äußeren Enden der Phrase Dekorations-Verhalten Wenden Sie beide clone Deklarationen auf das hervorgehobene Inline-Element an.
Ein großer Hintergrund-Rechteck Welches Element den Hintergrund besitzt Setzen Sie Hintergrund und Padding auf den inneren Inline-Span.
Hervorgehobene Zeilen berühren sich vertikal Vertikales Padding und Zeilenhöhe des Elternteils Verringern Sie vertikales Padding oder erhöhen Sie Zeilenhöhe.
Ein langes Label reicht über den Container hinaus Verfügbare Umbruch-Möglichkeiten Ziehen Sie die optionale Long-Token-Regel unten in Betracht.
Nur Safari fehlt das beabsichtigte End-Padding Präfixierte Deklaration Bestätigen Sie, dass -webkit-box-decoration-break: clone im Stylesheet verbleibt.

Für ein ansonsten unbrechbares synthetisches Label wie AmberTileSequenceAmberTileSequence können Sie overflow-wrap: anywhere zu .sample-title hinzufügen. Dies ist ein optionales CSS-Fragment, das Sie innerhalb der bestehenden Regel hinzufügen; der Rest des Beispiels bleibt gleich.

/* Optional addition inside the existing .sample-title rule */
overflow-wrap: anywhere;

Dies erlaubt einem ansonsten unbrechbaren String, bei Bedarf zu brechen, um Überlauf zu verhindern, ohne einen Bindestrich einzufügen. Es adressiert Umbruch-Möglichkeiten; es erstellt kein Padding. Gewöhnliche Phrasen mit Leerzeichen benötigen es möglicherweise nicht. MDN dokumentiert die Bedingungen für overflow-wrap.

Betrachten Sie auch den Hintergrund selbst. Mit clone werden Hintergründe unabhängig für jedes Fragment gezeichnet, sodass ein Farbverlauf oder Hintergrundbild auf jeder Zeile neu beginnen kann. Verwenden Sie eine Volltonfarbe, wenn Sie einen einheitlichen Highlight ohne wiederholtes Bildmuster wünschen. W3C beschreibt unabhängige Fragment-Hintergründe.

Natürlichen Textfluss und Formungsgrenzen beibehalten

Verwenden Sie einen Wrapper um die komplette beabsichtigte Phrase, anstatt separate Wrapper für die aktuell sichtbaren Zeilen herzustellen. Das hält das Markup unabhängig von der aktuellen Fensterbreite und Schriftwahl.

Vermeiden Sie, ein Wort in gepaddete Zeichen-Spans aufzuteilen, um den Effekt zu simulieren. Die CSS Text-Spezifikation verlangt, dass Formung über Inline-Grenzen hinweg bricht, wenn nicht-null Inline-Achsen-Padding, Ränder oder Margins benachbarte typografische Zeicheneinheiten trennen. Eine gepaddete Grenze innerhalb eines Wortes kann daher die Glyphen-Formung beeinflussen. Siehe W3Cs Formungs-über-Grenzen-Regeln.

Für diese Überschrift platzieren Sie den Wrapper an den Phrasengrenzen und lassen seinen internen Text kontinuierlich. Der praktische Vorteil ist, dass Sie vermeiden, zusätzliche gepaddete Grenzen innerhalb der Phrase einzuführen. Dies verspricht nicht identische Glyphen oder Zeilenenden über Browser und Schriften hinweg; prüfen Sie das tatsächliche Rendering, das Sie verwenden möchten.

Was, wenn das Projekt Tailwind CSS verwendet?

In einem bestehenden Tailwind-Projekt fügen Sie box-decoration-clone zum Inline-Element hinzu, das bereits den Highlight-Hintergrund und das Padding besitzt. Tailwinds aktuelle Dokumentierung ordnet dieses Utility box-decoration-break: clone zu. Sein box-decoration-slice Utility wählt das andere Verhalten. Siehe Tailwinds box-decoration-break Utilities.

Behalten Sie die Browser-Anforderung aus dem Plain-CSS-Beispiel bei: Prüfen Sie das generierte Stylesheet auf die präfixierte Deklaration, wo Safari-Support benötigt wird, und fügen Sie sie über das benutzerdefinierte CSS des Projekts hinzu, falls sie fehlt. Das Utility wählt das Dekorations-Verhalten; es entfernt nicht die Browser-Implementierungsgrenzen.

Es besteht keine Notwendigkeit, Tailwind allein für diesen Effekt einzuführen. Das vollständige lokale Beispiel enthält bereits das notwendige CSS.

Kann ein benutzerdefinierter Highlight dasselbe Padding verwenden?

Ein CSS Custom Highlight API Range, der durch ::highlight() gestylt wird, hat andere Fähigkeiten als ein gestyltes Inline-Element. MDN listet seine erlaubten Eigenschaften auf, einschließlich Textfarbe, Hintergrundfarbe und Textdekorationen. Padding und box-decoration-break liegen außerhalb dieses erlaubten Sets. Lesen Sie die dokumentierten Custom-Highlight-Styling-Grenzen.

Wenn Sie das Markup kontrollieren und echtes Padding auf jeder umgebrochenen Zeile benötigen, verwenden Sie einen Inline-Wrapper wie oben gezeigt. Wenn Sie range-basiertes Highlighting ohne Wrapper beibehalten müssen, verwenden Sie seine unterstützten Farb- und Dekorations-Eigenschaften und akzeptieren Sie, dass diese API keine gepaddeten Fragment-Boxen bereitstellt.

Für eine umgebrochene Seitenüberschrift oder Phrase behalten Sie einen Inline-Wrapper bei, setzen Sie dessen Hintergrund und Padding zusammen, und wenden Sie beide clone Deklarationen an. Schließen Sie ab, indem Sie verschiedene Breiten testen und den vertikalen Abstand prüfen. Diese Prüfungen stellen fest, ob der Highlight mit dem tatsächlichen Textfluss funktioniert, anstatt nur bei einer bequemen Fenstergröße.

Quellen