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:

  • 1

    +++ Wordpress Ticker (4) +++ — Software Guide

    Pingback vom 2. Februar 2007, 22:25


    Fatal error: Uncaught Error: Call to undefined function eregi_replace() in /kunden/151212_80993/webseiten/wp/wp-content/themes/sw-guide2/functions.theme.php:465 Stack trace: #0 /kunden/151212_80993/webseiten/wp/wp-content/themes/sw-guide2/comments.php(84): swg_formatCommentExcerpt('[...] Code in H...', 180) #1 /kunden/151212_80993/webseiten/wp/wp-includes/comment-template.php(1471): require('/kunden/151212_...') #2 /kunden/151212_80993/webseiten/wp/wp-content/themes/sw-guide2/index.php(148): comments_template() #3 /kunden/151212_80993/webseiten/wp/wp-includes/template-loader.php(74): include('/kunden/151212_...') #4 /kunden/151212_80993/webseiten/wp/wp-blog-header.php(19): require_once('/kunden/151212_...') #5 /kunden/151212_80993/webseiten/wp/index.php(17): require('/kunden/151212_...') #6 {main} thrown in /kunden/151212_80993/webseiten/wp/wp-content/themes/sw-guide2/functions.theme.php on line 465