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

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

而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用overflow:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。

点击查看：http://www.css88.com/demo/pre/index-1.html

今天折腾了一个晚上终于搞定<pre>的内容自动换行的问题：

1.先尝试使用：word-wrap: break-word;将内容自动换行，IE，OP，Chrome，Safari都可以，FF就悲剧了。

点击查看：http://www.css88.com/demo/pre/index-2.html

2.查看了pre的浏览器默认样式：

xmp, pre, plaintext {
  display: block;
  font-family: -moz-fixed;
  white-space: pre;
  margin: 1em 0;
}

都有这个white-space: pre，看看white-space的值：

有个pre-wrap，保留空白符序列，但是正常地进行换行。

这样就OK了搞定，我们只要加上样式：

就能使<pre>的内容自动换行了。

点击查看：http://www.css88.com/demo/pre/

建议继续学习：

1. Ruby 解析 HTML (Nokogiri)    (阅读：3909)
2. HTML5是什么东东 我们为什么要关注    (阅读：3852)
3. HTML页面布局基础    (阅读：3684)
4. 为什么不压缩 HTML    (阅读：3477)
5. HTML优化    (阅读：3107)
6. Ajax和WEB服务数据格式：XML SOAP HTML    (阅读：3042)
7. 在HTML中获取正确的URL属性值    (阅读：2923)
8. 自己实现的简单的html元素选择器，类似jquery选择器，比jquery选择器还要快！    (阅读：2842)
9. 从HTML 2.0到HTML5    (阅读：2842)
10. HTML特殊字符大全    (阅读：2539)