LineBreaks / Zeilenumbrüche mit CSS steuern

Um nur Linebreaks per CSS zu steuern gibt es einige Möglichkeiten. Hier zwei davon.

Beispieltext:

Nicht in der Erkenntnis liegt das Glück<br class="break" /> sondern im Erwerben der Erkenntnis.

In diesem Beispiel wird das br-Tag nur angezeigt wenn der Viewport kleiner 501px ist.

br.break{
  display: none;
}
@media (max-width: 500px) {
  br.break{
    display: inline;
  }
}

Beispieltext:

Nicht in der Erkenntnis liegt das Glück<span class="break" />sondern im Erwerben der Erkenntnis.

In diesem Beispiel wird vor dem Span-Tag ein Linebreak eingefügt wenn der Viewport kleiner 501px ist. Andernfalls wird vor dem Span-Tag ein Komma und ein Leerzeichen eingefügt.

span.break:before {
    content: ', ';
    white-space: normal;
  }
@media (max-width: 500px) {
  span.break:before {
    content : '\a';
    white-space : pre ;
  }
}