Der pre Tag dient dazu einen Text wiederzugeben wie er eingegeben wurde. Das ist an sich auch ganz schön, kann aber bei kleinen Auflösungen oder einem responsiven Design zum Problem werden. Den dort wird entweder das Layout zerschossen oder der Inhalt des pre Tags durch eine overflow CSS Anweisung abgeschnitten. Abhilfe schafft hier:
pre
{
white-space: pre-wrap;
}
im CSS. Dadurch wird der pre Tag im Zweifelsfall umgebrochen und bleibt somit lesbar.
Weitere Informationen gibt es unter:
http://www.css4you.de/Texteigenschaften/white-space.html
http://blog.bissinger.biz/zeilenumbruch-im-pre-tag/
http://de.selfhtml.org/html/text/praeformatiert.htm
Ich verwende für
premeistensoverflow: auto;. Das erzeugt bei Bedarf eine Scrollleiste im Pre-Block. Wenn der Text im pre-Tag unkontrolliert umgebrochen wird, siehts mitunter komisch aus und in der Praxis will man damit ja meistens Quellcode genauso wiedergeben, wie es Syntax verlangt.Falls der Wert
autonicht funktioniert (ist mir bei keinem aktuellen Browser bekannt), sorgtscrolldafür, dass auf jeden Fall eine Scrollleiste angezeigt wird — falls sie nicht benötigt wird, ist sie ausgegraut.Siehe z.B. http://www.css4you.de/overflow.html und http://www.css4you.de/example/overflow.html
Das Problem mit overflow:auto ist das es dann auf Mobilgeräten (z.B. Android) abgeschnitten wird, was ich nicht wollte deshalb die pragmatische Lösung :)