Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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.

h1 {
  font-size: 1.3em;
  background: #222;
  color: white;
  padding: .3em .7em .2em .4em;
  display: inline;
  line-height: 160%;
}
box-decoration-break-css
Das Standard-Styling: An den Umbrücken entstehen harte Kanten

CSS box-decoration-break

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

Browsersupport

Zum Veröffentlichungszeitpunkt dieses Beitrags unterstützen alle Browser bis auf den Internet Explorer die Eigenschaft. Den exakten Browsersupport entnehmt ihr bitte der Website caniuse.com

Links/Quellen

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas 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 (Autor)
      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 →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: