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