Software Guide

Die besten Tipps, Anleitungen und Downloads

Ihre Werbung auf Software Guide

Sie möchten in dieser Box oder an anderer Stelle dieser Webseiten eine Werbung schalten? Sehen Sie sich dazu am besten einfach mal die verschiedenen Möglichkeiten an.


Die Krux mit Code-Blöcken und pre-Elementen auf Webseiten

5. Oktober 2006 von Michael | Webmaster/CMS/Blog

HTML sieht zur Darstellung von Quellcode das Inline-Element <code> vor. Will man den Quellcode als Block darstellen und z.B. auch einen Rahmen darum anzeigen oder eine andere Hintergrundfarbe für diesen Block vergeben, so kann man das <pre>-Element als Container vom <code>-Element einsetzen:

<pre><code>
function halloWelt() {
    $var = ‚Hallo, Welt!‘;
    echo $var;
}
</code></pre>

Das <pre>-Element sorgt hier dafür, dass Zeilenumbrüche und Leerzeichen 1:1 wiedergegeben werden, was ja normalerweise in HTML nicht der Fall ist. Damit kann man u.a. Code-Einrückungen schön darstellen.

Problem:

Ist eine Zeile länger als vorgesehen, so erfolgt kein automatischer Umbruch, sondern der Text läuft u.U. auch über die Sidebar hinaus:
01.png
Im Internet Explorer kann dieses Verhalten bewirken, dass die Sidebar dann unterhalb der Seite dargestellt wird.

Lösung:

Wie ich bei Lorelle gelesen habe, hat Tyler eine Lösung für diese Problematik gefunden. Mit etwas CSS-Code kann man einen Zeilenumbruch beim letzten Leerzeichen erzwingen, wenn der Text zu lang wird:

pre {
   white-space: pre-wrap;       /* css-3 */
   white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
   white-space: -pre-wrap;       /* Opera 4-6 */
   white-space: -o-pre-wrap;       /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

Allerdings weiß ich nicht, wie sich das ganze mit anderen Browsern, wie etwa Safari verhält, ich habe daher mal eine Test-Datei erstellt: pre-beispiel.html. Wäre prima, wenn das mal ein Mac-User testen könnte ;-)

Informationen zum Artikel:

Weiterblättern im Blog:

Was ist ein Trackback?

2 Trackbacks/Pings:

7 Comments:

Gravatar

1

dl7und

15. Oktober 2006, 5:57

Funktioniert. (in Safari)

Gravatar

2

Michael (Author)

15. Oktober 2006, 16:40

Danke für’s testen ;-)

Gravatar

3

Webdesign-blog

16. Dezember 2006, 12:31

Ich hatte bis gerade haargenau das gleiche Problem, doch jetzt wird mein Code schön dargestellt, vielen dank für den Artikel!!

Btw wenn du noch auf das Plugin „Code Markup: a WordPress plugin“ zur Darstellung von Code hinweist, dann kann man diesen Artikel als Muster-Beispiel dafür nehmen wie man Code in WordPress ausgibt.

Gruß Christian

Gravatar

4

Michael (Author)

18. Dezember 2006, 22:35

Gern geschehen, Christian. Der Artikel sollte eigentlich unabhängig von CMS oder Blog-Systemen sein, daher auch kein Hinweis auf WordPress :)

Gravatar

5

Webdesign-blog

18. Dezember 2006, 23:15

Ah ok, sorry hast natürlich recht. Vielleicht stößt ja jemand auf den Kommentar und findet den Link zum Plugin nützlich.

Gravatar

6

Michael (Author)

18. Dezember 2006, 23:20

Das auf jeden Fall, danke für den Link-Tipp.

Gravatar

7

Valerian

23. April 2007, 18:25

Vielleicht auch noch hilfreich: word-break, soft hyphens, and zero width spaces

Die Kommentarmöglichkeit ist derzeit für diesen Artikel ausgeschaltet.

Blog-Kategorien

Volltextsuche

Neueste Artikel

Neueste Kommentare

Neueste Trackbacks/Pingbacks

Andere Projekte

Blogparade

dient als zentrale Anlaufstelle für Blog-Paraden bzw. Blog-Karnevals und andere von BloggerInnen veranstaltete Aktionen.

Mediadaten

Feed-Statistik:
Feedburner

Software Guide gibt es seit Dezember 2005 und es werden durchschnittlich 4 Blog- Beiträge/Monat veröffentlicht. Die Themenschwerpunkte sind in der Tagcloud ersichtlich. Mehr Infos...

Links

 

Nach oben

Wordpress

© 2005-2016 Software Guide | ISSN 1864-9599