× 429字 × 6阅

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

在看以前的日志的时候发现简单播放器的链接失效,于是从百度快照上搬过来留个底。 透明播放器 <embed src="歌曲地址" autostart="true" loop="true" hidden="true" width="0" height="0"></embed> 多首播放器 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="160" height="20"><param name="width" value="160" /><param name="height" value="20" /><param name="src" value="http://thusz.blogbus.com/files/12237969930.swf" /><param name="wmode" value="transparent" /><param name="flashvars" value="mp3=歌曲地址|2mp3|3mp3|4mp3|5mp3|6mp3|7mp3|8mp3|9mp3&amp;autoplay=1" /><embed type="application/x-shockwave-flash" width="160" height="20" src="http://thusz.blogbus.com/files/12237969930.swf" wmode="transparent" flashvars="mp3=歌曲地址|2mp3|3mp3|4mp3|5mp3|6mp3|7mp3|8mp3|9mp3&amp;autoplay=1"></embed></object> 简易播放器一 <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="200" height="16"><param name="width" value="200" /><param name="height" value="16" /><param name="src" value="http://thusz.blogbus.com/files/12162166380.swf?playerID=1&amp;bg=0xf8f8f8&amp;leftbg=0xeeeeee&amp;lefticon=0x666666&amp;rightbg=0xcccccc&amp;rightbghover=0x999999&amp;righticon=0x666666&amp;righticonhover=0xFFFFFF&amp;text=0x666666&amp......
点击加载Disqus评论