<pre>标签可定义预格式化的文本,被包围在 pre 元素中的文本通常会保留空格和换行符,但是,当你在<pre>标签里面写代码的时候,如果你没有手动换行,它是不会自动换行的,而是一直保持一行的状态。
解决方法,添加pre的css样式

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;       /* Internet Explorer 5.5+ */
}