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> 也能自动换行。


评论