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