<h1 class="one">

  Break right after this

  <!-- <br> could go here, but can we do it with CSS? -->

  <span>
    and before this
  </span>

</h1>

` verwenden, und wir würden diesen Umbruch einfach dadurch erhalten, dass das `div` ein Block-Level-Element ist.

Aber wir verwenden aus Designgründen absichtlich einen ``. Der Text nach dem Umbruch sollte inline/inline-block sein, da er einen Hintergrund, einen Innenabstand und dergleichen haben wird.

Zeilenumbrüche können über Pseudo-Elemente eingefügt werden

Das ist einfach

h1 span::before {
  content: "\A";
}

Aber… der `` ist ein Inline-Element. Der Zeilenumbruch hat keine Wirkung! Genau wie ein *echter* Zeilenumbruch keine Wirkung hätte.

Wir können diesen Zeilenumbruch zum Funktionieren bringen, indem wir Leerzeichen bedeutungsvoll machen…

h1.two span::before {
  content: "\A";
  white-space: pre;
}

Das funktioniert tatsächlich. Aber… wegen des Innenabstands und Hintergrunds bleibt ein kleines Stück davon übrig, wenn die Zeile umbrochen wird.

Wir könnten die unbeholfenen, an den Rand geschmiegten Kanten mit `box-decoration-break: clone;` beheben, aber… das lässt nur ein größeres Stück oben.

Wenn wir den `span` inline-block machen würden, würde der Umbruch innerhalb dieses Blocks erfolgen, was wir auch nicht wollen.

Das Pseudo-Element auf block-level zu setzen und den `span` alleine zu lassen, bringt den Trick auch nicht.

Man könnte ein wenig verrückt werden und den tatsächlichen Text mit einem Pseudo-Element einfügen

Das war Aaron Bushnells Idee. Der Trick hierbei ist, den `span` als Block-Element zu gestalten, aber dann den Text mit einem Pseudo-Element einzufügen und ihn als Inline-Element zu stylen.

h1 span {
  display: block;
}
h1 span::before {
  content: attr(data-text);
  background: black;
  padding: 1px 8px;
}

Ich bin schon lange ein Fan von Pseudo-Element-Tricks, aber das fühlt sich leicht gefährlich an, da es die Barrierefreiheit beeinträchtigen könnte. Ich glaube, einige Screenreader lesen Pseudo-Elemente, aber nicht alle, und sie sind auch nicht dazu gedacht. Ganz zu schweigen davon, dass man den Text auf diese Weise nicht kopieren und einfügen kann. Zumindest ist der Text immer noch vollständig im HTML erhalten!

Ausnutzen von Tabellen-Layout

Meine Lieblings-Idee stammt von Thierry Koblentz. Machen Sie einfach den `span` zu `display: table;` und fertig. Es handelt sich natürlich nicht um tabellarische Daten, aber das spielt keine Rolle. Die Tatsache, dass Sie Tabellen-Layout aus CSS erzwingen können, dreht sich alles um die Nutzung der einzigartigen Layout-Eigenschaften von Tabellen-Layout – nicht um Semantik.

h1 span {
  display: table;
}

Live-Demos

Einschließlich einer, bei der wir einfach nur ein `
` verwenden, was in Ordnung ist.

Siehe den Pen Attempting a line break before and inline-block within a header von Chris Coyier (@chriscoyier) auf CodePen.