pre 标签会原样保留HTML内容的格式，可是如果宽度过大会把页面撑坏，这时候需要自动换行来帮忙：

Wrapping the pre tag

Making preformated text wrap in CSS3, Mozilla, Opera and IE is the tip that let’s you use the pre tag to keep the formatting, without cursing yourself when some of the content is too long and doesn’t wrap:

/* Browser specific (not valid) styles to make preformatted text wrap */
pre {
  white-space: pre-wrap;
  /* css-3 */
  white-space: -moz-pre-wrap;
  /* Mozilla, since 1999 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  word-wrap: break-word;
}

来源：http://ajaxian.com/archives/wrapping-the-pre-tag