Software Guide

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:

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 ;-)