pre/blockquote 内容自动换行

2013-06-26补充：博客搬家 Blogger，手动修改所有文章，代码装进 <pre><code></code></pre> 中，不换行。

之前修改主题的时候发现可以自定义 <pre> 标签，很是高兴，突然明白了人人口中的短代码大概是什么意思。于是自定义了喜欢的样式，在博文中小试牛刀，但是发现 <pre> 里的内容无法自动换行，觉得挺郁闷，于是就自己换好行，暂且就过去了。然而前些天发表 I LOVE YOU 的时候，由于要介绍尾崎丰的生平，想着用 <pre> 包装好，结果再一次面临内容自动换行的问题。

火速谷歌后，找到了以下方法（参考源链接失效）：

blockquote, pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap:break-word; /* ie */
overflow:hidden;
}

原文说可以兼容 ie、firefox、chrome、opera 和 safari，但是我实际测试后发现不兼容 safari。于是今天我又继续谷歌，找到以下代码（参考源）：

white-space: pre-wrap;
word-wrap: break-word;

话说这次倒是解决了 safari 的问题，但是我没有 opera，不知道会不会不行，有的童鞋可以自己测试一下。不过我就是有点疑惑，对比上下代码，下面的代码上面都有，为什么上面的多了几行反而表现不佳呢？无论如何，下面的既然又精简又表现得好，就用下面的咯~另外这两行代码也可以加入 <blockquote> 的 css 中，让 <blockquote> 也能自动换行。