让pre标签的代码块自动换行
<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。
<pre> 标签的一个常见应用就是用来显示源码。
而经常遇到的问题是：如果一句代码很长的情况，结果会造成页面撑开或者代码超出边界，非常难受。
用 overflow:hidden 那么会将原来的代码隐藏掉导致显示不全
而如果用 overflow:auto 则经常出现两个滚动条（右部和底部），阅读不方便还不美观。
如图：
今天折腾了一个好久，才搞出解决 <pre> 的代码块自动换行的办法：
先尝试我们经常会使用的强制换行：word-wrap: break-word;
好像很完美，谨慎的我换着浏览器看了下，结果发现：IE，OP，Chrome，Safari都可以，Firefox就悲剧了。
纳尼，这是什么情况，同样是现代浏览器，FF竟然这么不争气。
仔细查了一下关于换行的css，原来还有 white-space ，丢到浏览器里试一试，填几个 参数 看看效果
加上了 white-space:pre-wrap; 发现Firefox可以神奇的换行了，大功告成！、
最后代码如下：
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
效果如下：
这样就没有了底部的那个左右滚动条了，看代码的时候就可以心无旁骛的乡下滚动啦
路过看看，貌似你们三还在继续折腾啊
你没事吧，连续更新了
你不也偶尔连续更新么
帮人弄个WP，为了找个简单的主题，找去找来，找到了iDevise！ :smile: :smile: :smile:
:neutral: 有点凑数的意思在里面
话说这个代码高亮会不会再后续版本里加进去 这样我就不用引用其他的代码了。
这哪里是代码高亮啊,这是css处理 :idea:
看样子很成功，骗过去一个小白
群里已经发布了，只是预览版，你可以下载试试了
伦家为了代码不自动换行看起来整体完整,才特意处理的pre,你倒好,直接换行了.
一般pre都是x坐标auto,y坐标不做限制.
难道你的编辑器不开启折行吗？代码很长看起来岂不很麻烦，而且上下拉很方便，左右拉不方便，当然要想办法去掉左右滚动条
我有强迫症,自动换行的代码让我感觉浑身难受,而且不好对齐,所以我都不自动换行.
好吧，我平时为了看代码方便，喜欢自动换行，这样用鼠标上下滚动就行了，不用左右来回拉。。。
为什么会代码写那么长呢?除非压缩css或者js,不然我都没机会写长代码,遇到符号我就换行了. :oops:
我就看看热闹，不说话。 :smile:
不错，干货满满，支持！
Get it…… :oops: 呵呵…
哦……JK :oops:
:smile: 嗯，以前研究了大白天却什么也不懂 undefined
感谢，已经添加了
支持！不错！
:arrow: 前排出售瓜子矿泉水
:???: 我这种学渣！ :cry: :cry:
做个测试啊
懂点样式真好，我花了好几天调整网站样式，不伦不类
学习了 :twisted:
大佬的代码样式真好看，我要学一学了，自己的那个好丑。。。
顺便请大佬帮我看看我的文章页上下文部分样式啊~怎样才能更极客一点吖23333
大佬，你这个pre怎么让他没有上下滚动条呢？不怕代码占地方大。（自动换行解决左右滚动条蛮好的了！）
一年前我怎么留过这么智障的评论。。。真丢人...
一晃一年过去了，你技术一定是突飞猛进
2333，并没有突飞猛进，只是有那么点理解提问的智慧了。菊苣加油哈哈哈
受益匪浅！
棒