CSS兼容所有浏览器的pre标签内容自动换行代码
浏览器太多了，例如火狐，谷歌，ie8等等，现在发一个兼容的代码实现pre自动换行，喜欢的支持
pre, code {
display: block;
overflow: auto;
background: #f4f4f4;
padding: 5px 10px;
border: 1px solid #eee;
whitewhite-space:pre-wrap; /* css-3 */
whitewhite-space:-moz-pre-wrap; /* Mozilla, since 1999 */
whitewhite-space:-pre-wrap; /* Opera 4-6 */
whitewhite-space:-o-pre-wrap; /* Opera 7 */
word-wrap:break-word; /* Internet Explorer 5.5+ */
white-space: pre-wrap; /* Firefox */
}
--------------------------------------------
CSS实现pre标签内容自动换行(插入的代码有行号)
在代码显示上有点小问题，插入的代码堆积在一起看起来很乱，开始的时候以为是GeShi插件的问题一直也没在意，今天突然想到也许是CSS的问题，于是从网上找了段代码对pre标签样式进行了些改动，改动的部分：
pre, code {
display: block;
overflow: auto;
background: #f4f4f4;
padding: 5px 10px;
border: 1px solid #eee;
word-wrap:break-word; /* Internet Explorer 5.5+ */
}
代码块中的内容终于自动换行了。
但在FireFox中还是有些问题，于是再次修改CSS，最终的代码：
pre, code {
display: block;
overflow: auto;
background: #f4f4f4;
padding: 5px 10px;
border: 1px solid #eee;
word-wrap:break-word; /* Internet Explorer 5.5+ */
white-space: pre-wrap; /* Firefox */
}
与上面的相比，只是多了最后一行的代码（现在博客中的代码看起来舒服多了）下面的代码在FF和IE中略有不同，FF下ol会有margin-bottom:20px的效果
下面的代码在FF和IE中略有不同，FF下ol会有margin-bottom:20px的效果
<pre><ol></ol></pre>
--------------------------------------------
css解决<pre>标签里的文本换行
<pre>标签可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符，但是，当你在<pre>标签里面写代码的时候，如果你没有手动换行，它是不会自动换行的，而是一直保持一行的状态。
解决方法，添加pre的css样式
pre {
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}
Tags: css, pre
