Paddings auch bei Umbrüchen beibehalten

Oft möchte man Absätze oder Überschriften optisch vom Hintergrund trennen, um diese Elemente noch besser hervorzuheben. Das ist vor allem bei unruhigen Hintergründen oder einem schlechten Kontrastverhältnis sinnvoll. Etwa wie im folgenden Beispiel:

Im ersten Schritt kann man dem Textelement einen dunkleren Hintergrund geben. Damit der Text noch etwas Luft bekommt, erhält er außerdem ein Padding:

Wenn man dann die einzelnen Zeilen z.B. mit den folgenden CSS-Anweisungen voneinander trennt...

...erhält man dieses unschöne Bild. Die voreingestellten Paddings links und rechts werden durch den Zeilenumbruch abgeschnitten.

Mit Hilfe von decoration-break:clone; kann man das aber ändern. Dem Textelement wird einfach zusätzlich diese Anweisung zugewiesen:

Damit bleiben die horizontalen Paddings auch bei Zeilenumbrüchen erhalten.

decoration-break:clone; wird von fast allen modernen Browsern unterstützt, im Zweifel hilft ein Blick bei https://caniuse.com/css-boxdecorationbreak

Bildnachweis:

Photo by A A on Unsplash

Hinweis: Wie immer gilt, dass für das Funktionieren dieser Snippets keinerlei Haftung oder Gewährleistung übernommen wird.