splitt-it.de

my digital lifestyle

Home » Internet » Blog » Zeilenumbruch (Leerzeile) unter WordPress

Beim verfassen meiner ersten Beiträge ist mir schon übel aufgestoßen, dass ich mit WordPress zwar Zeilenumbrüche bzw. eine oder mehrere Leerzeilen per HTML (<br />) einfügen kann, aber beim nachträglichen editieren sind diese Leerzeilen wieder weg. Ich hab schon länger mal hier und da nach einer Lösung gesucht, jetzt endlich habe ich einen Workaround bei marco.seaside-graphics.de gefunden:

[cc lang=’html4strict‘ ]
[/cc]
Dieser einfache Code bewirkt jeweils einen Zeilenumbruch und kann auch mehrfach hintereinander angewendet werden. Mehrfach hinter einander macht das aber nur unter gewissen Voraussetzungen Sinn, deshalb beachtet bitte den weiteren Text, denn hinter dem CSS-Code steht auch noch etwas mehr, wenn in der style.css folgendes steht:

[cc lang=’css‘ line_numbers=’false‘].clear {

clear:both;

}[/cc]

Verwendet man diesen Code z.B. in einem Artikel, wo Bilder vorhanden sind und der Text als Fließtext um diese Bilder fließt, dann wird damit unterbunden, dass die folgenden Elemente neben anderen Elementen stehen dürfen. Hier ein Beispiel, mir fällt es schwer das ganze zu erklären…

Beispiel:
Bildquelle flickr von teamstickergiant (http://goo.gl/limDw)

Bildquelle flickr von teamstickergiant (http://goo.gl/limDw)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Somit hebt das clear-Attribut die Eigenschaft auf, dass das Bild von Fließtext weiter umgeben wird. Hier macht natürlich nur ein Aufruf Sinn.
Teilweise ist es wünschenswert den Text komplett unter Bildern fortzusetzen, aber sicherlich nicht immer. Ich hab mir natürlich schnell eine kleine Alternative ausgedacht, mit der es auch Möglich ist neben Bildern Leerzeilen zu erzwingen ;-). Ergänzt Eure CSS-Datei um folgende Zeile (ist nicht notwendig, aber etwas sauberer, als einen Verweis in eine nicht vorhandene Klasse):
[cc lang=’css‘ line_numbers=’false‘].brline { width:100%; }[/cc]

Dann könnt Ihr Zeilenumbrüche wie bereits oben beschrieben durchführen, nur anstatt der Klasse „clear“ verwendet Ihr „brline“:
[cc lang=’html4strict‘ ]
[/cc]
Ist im Prinzip sowas wie die „clear“-Klasse, nur wird hier nicht aufgehoben, dass Elemente nebeneinander stehen dürfen, sondern nur, dass der Zeilenumbruch 100% Breite nutzt. Eigentlich völlig sinnfrei, aber es funktioniert…

Beispiel:
Bildquelle flickr von teamstickergiant (http://goo.gl/limDw)

Bildquelle flickr von teamstickergiant (http://goo.gl/limDw)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Die Alternative, ein geschütztes Leerzeichen

Eine Alternative ist mir erst später eingefallen mit Hilfe des Plugins „TinyMCE Advanced“. Hier wird der Zeilenumbruch so umgesetzt, dass jedes mal ein Paragraph gesetzt wird und dieser beinhaltet ein geschütztes Leerzeichen. Wer dieses Plugin nicht einsetzt muss demnach nur unter HTML in jeder Leerzeile folgendes eintragen (Bitte ohne das Leerzeichen nach dem &):

[cc lang=’html4strict‘ ]& nbsp;[/cc]

Problematisch wird es hier nur, wenn in der style.css der Paragraph Eigenschaften zugewiesen bekommt, wodurch z.B. vor oder nach dem Absatz mehr Platz vergeben wird.

splitti

Technik-Fan Leidenschaft: TimeLapse / HyperLase

2 Antworten bislang...

  1. Narada sagt:

    Danke! mit konnte ich endlich das Problem lösen!


?