Die CSS-Eigenschaft box-decoration-break – padding & Co. beim Zeilenumbruch beibehalten

Wenn ihr Inline-Elementen über padding einen Innenabstand zuweist, dann wird dieses padding bei einem Zeilenumbruch ignoriert. Gleiches gilt für Eigenschaften wie box-shadow oder border-radius. Diese Tatsache ist in der Praxis extrem lästig, da es beispielsweise nicht möglich ist nur den Textbereich einer mehrzeiligen Überschrift mit einer Hintergrundfarbe zu hinterlegen und ansprechend zu gestalten. An den Zeilenumbrüchen wird der Hintergrund unschön abgeschnitten. Die CSS-Eigenschaft box-decoration-break schafft Abhilfe.

Zeilenumbrüche mit CSS optimieren

Angenommen wir möchten die Überschriften auf unserer Website so gestalten, dass der Text farbig hinterlegt ist. Da das HTML-Element ein Block-Element ist, muss die Überschrift zunächst auf display:inline; gestellt werden, damit der farbige Hintergrund auch wirklich nur hinter dem Text angezeigt wird. Mit padding sorgen wir dafür, dass der Text einen kleinen Abstand zum Rand des eingefärbten Hintergrunds behält.

Sofern die Überschrift einzeilig ist gibt es kein Problem. Bei mehrzeiligen Überschriften hingegen bricht der Text um, und verliert an der Umbruchkante das padding. Sehr ärgerlich.

box-decoration-break-css
Das Standard-Styling: An den Umbrücken entstehen harte Kanten

CSS box-decoration-break

h1 { 
  font-size: 1.3em;  
  background: #222;  
  color: white;  
  padding: .3em .7em .2em .4em;  
  display: inline;  
  line-height: 160%;
}

Die CSS-Eigenschaft box-decoration-break ermöglicht es die Gestaltung an der Umbruchkante eines Inline-Elements festzulegen. Es stehen folgende Eigenschaften zur Verfügung:

Eigenschaften für box-decoration-break

slice
Das Element wird als Ganzes betrachtet und die Gestaltung wird nur an den Außenkanten angewandt. Bei einem Umbruch entsteht ein harter Schnitt (Standardwert).
clone
Das Element wird – sofern ein Umbruch in der Horizontalen oder Vertikalen stattfindet – in Fragmente unterteilt. Der Style wird dann auf jedes Fragment einzeln angewandt.

Mit der Eigenschaft clone kann das Problem aus dem o.g. Beispiel problemlos korrigiert werden.

h1 {
  …  
  -webkit-box-decoration-break: clone;  
  box-decoration-break: clone;
}
Korrigierte Darstellung mit box-decoration-break
Korrigierte Darstellung mit box-decoration-break

Beispiel anschauen

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-boxdecorationbreak feature across the major browsers from caniuse.com

Fehler in Safari 16

In Safari 16.4 scheint es ein Problem mit box-decoration-break: clone und padding am Ende von Zeilen zu geben. Der Fehler ist dokumentiert und sollte in Safari 16.5. behoben sein.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 9 Kommentare

  1. herrfischer
    schrieb am 28.09.2016 um 10:17 Uhr:

    Wer eine JS Lösung findet kriegt 10 Euro.

    Antworten
    • Sarah
      schrieb am 28.09.2016 um 11:29 Uhr:

      Die 10 Euro bitte an die Kinderkrebshilfe ;-)

      Das hier funktioniert super bei mir und logischerweise auch Cross-Browser:

      1. Die Überschrift nicht selbst umbrechen lassen, sondern mit einem „br“ umbrechen.

      2. Mit diesen 3 Zeilen jQuery nach dem „br“ suchen lassen und dem Teil vor und nach dem „br“ ein „span“ zuweisen:
      http://stackoverflow.com/questions/19038552/jquery-wrap-text-in-a-span-before-and-after-br-within-a-paragraph

      3. Dem span die Paddings und den Background zuweisen.

      Sieht jemand von Euch gravierende Nachteile bei dieser Lösung?

      Antworten
      • herrfischer
        schrieb am 28.09.2016 um 12:12 Uhr:

        @sarah Soweit war ich schon klappt dann halt nicht mit CMS Headlines bzw. Texten die aus irgendeiner DB kommen.

  2. Sarah
    schrieb am 28.09.2016 um 08:25 Uhr:

    Funktioniert nur leider nicht im IE, also gibt es genau genommen immer noch keine Lösung für das Problem.

    Antworten
    • Jonas Hellwig
      schrieb am 28.09.2016 um 08:31 Uhr:

      Hallo Sarah, ich denke schon, dass es eine Problemlösung darstellt. Websites müssen nicht in jedem Browser identisch aussehen.

      Antworten
      • Sarah
        schrieb am 28.09.2016 um 09:56 Uhr:

        Sehe ich grundsätzlich auch so (und praktiziere das meistens auch so), aber wie erkläre ich das in diesem Fall dem Kunden. Erkläre mal, dass das (doch wirklich supereinfach scheinende Element) in einem weitverbreiteten Browser anders aussieht und Du das nicht lösen kannst. Der Ansatz mit „box-shadow“ ist ja auch Mist. Wenn man genau hinsieht, erzeugt das eine unsaubere Ecke am Anfang und am Ende, wo das künstliche Padding angesetzt ist. Ich suche jetzt mal nach einer Javascript-Lösung, so gebe ich das jedenfalls nicht ab. Schade eigentlich, dass sich „box-decoration-break“ noch nicht als Standard durchgesetzt hat.

  3. Bianca
    schrieb am 09.09.2016 um 09:39 Uhr:

    Vielen Dank, damit hast Du mir grad‘ den Tag gerettet!

    Antworten
  4. Alexander Rutz
    schrieb am 11.08.2016 um 14:04 Uhr:

    Das war ein schöner Moment, als ich diese Eigenschaft entdeckt habe. Gerne denke ich daran zurück :)

    Antworten
  5. herrfischer
    schrieb am 08.06.2016 um 10:20 Uhr:

    kennt jemand nen (JS?) fallback für den IE?

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →