Da ich doch immer mal wieder diversen Code hier niederschreibe hat sich ein Plug-In zum Syntax Highlighting namens “Snippet Highlight” in mein WordPress dazugesellt. Schlecht bzw. gut – weil ja eigentlich Sinn der Sache – ist, dass ein pre-formatierter Text eben genau so wiedergegeben wird, wie er eingetippt wurde. Die Folge ist meist, dass bei langen Strings diese regelmäßig schön über das Layout hinaus schießen oder, je nach Layout, auf einmal im nirgendwo verschwinden.

Mit HTML kann man das “Problem” lösen, indem man im pre-Tag einfach width=50 eingibt. Somit wird nach maximal 50 Zeichen ein Zeilenumbruch durchgeführt. Je nach genutztem WordPress-Plugin wird dies jedoch wieder entfernt, wenn man pech hat.

CSS ist da schon etwas sicherer. Im Blog “Unwakeable” von Tyler Longren bin ich mal auf ein schönes CSS-Format gestoßen, dass jeden Browser gut bedient.

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+ */
 width: 99%;
}

Alternativ dazu kann man sich natürlich auch einen div-Container drum herum bauen, mit fester Breite und Höhe und dem ganzen einen overflow verpassen. Kann man, muss man aber nicht, weil nicht wirklich elegant. Vorteil ist jedoch, dass es ins Layout passt und trotzdem die Formatierung erhalten bleibt.