pre 标签中内容换行

HTML <pre> 标签
定义和用法
pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

w3c: http://www.w3school.com.cn/tags/tag_pre.asp

 

pre 标签中的代码时常会超出模板的边界，这时我们就得想想办法了：
办法一:强制要出界的代码换行

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+ */
}

办法二:即将出界的代码隐藏起来，这时出现横向滚动条

pre {
 width:521px;
 overflow: auto; overflow-y:hidden
}

这两个办法均能通过在W3C的CSS检验

by: http://xizhiabc.info/dev/191-pre-tips-force-line-and-horizontal-scroll-bar