OrzDream » CSS

WordPress 技巧：让 PRE 标签自动换行

NetPuter — Tue, 09 Dec 2008 05:36:03 +0000

技术类Blog在成长过程中总会遇到使用代码的情况，你是用什么方式显示代码的呢？ NetPuter 是用插件（ WP-Syntax ）实现的，这款插件优点就是简洁，支持的语言语法很多。但我在使用过程中也发现了一个问题，就是不会自动换行。感觉很多人也会遇到这个问题，今天就来告诉大家如何通过 CSS 使 WP-Syntax 等利用PRE标签的插件自动换行！

让 PRE 标签自动换行

为了方便演示，本文的效果都是截图，而代码则来自《WordPress 技巧：在 SEO 面前砍掉多余内容》。

首先，我们先来看看 WP-Syntax 原始效果：

嗯，如果不是在代码中换行，代码就会整一行的显示出来。根据源码我们可以发现在pre标签中显示代码的名为 Code 的 Class ，因此我们就能针对其进行修改啦！请出超强大的 CSS ！
1
2
3
4
5
6
.code pre{
	word-wrap:break-word; /* 内容将在边界内换行。如果需要，词内换行( word-break )也将发生。 */
	word-break:break-all; /* 允许在词间换行， 也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
 */
	white-space:normal; /* 文本自动处理换行。假如抵达容器边界内容会转到下一行。 */
}
把这段代码插入到主题目录的 style.css 的屁股（其实想插哪儿都可以），然后你会发现代码变成酱紫了：

代码的确都自动换行了，但是有行号的话就会对不上。其实，对于 WP-Syntax 来说是不可能实现行号相对应且代码自动换行的。因为 WP-Syntax 是使用一个表格来显示代码，而左列是行号，右列是代码。如果你想又行号对应，又自动换行的话，可以考虑使用 CoolCode 这款插件，它是采用 li 的方式显示每一行代码的，但插件本身也不支持自动换行，但是你可以参考上面提供的代码SM下 CoolCode 哦。XD

因此，现在就只有实现无行号自动换行、有行号不换行咯，瞎蒙了下居然可以实现了（不知道为啥）：
1
2
3
4
.code pre{
	word-wrap:break-word;
	word-break:break-all;
}
然后就变成这鸟样了：

OK！但至于为什么呢我就不知道了，有童鞋可以告诉我吗？

关于如何在非IE浏览器实现此效果，可以看看 Leeiio 童鞋的《讓你的< pre >< /pre > 能自動換行》。

{02}技术流 OrZine第二期出炉啦

NetPuter — Fri, 31 Oct 2008 16:00:17 +0000

今天是11月1日，我们第二期的OrZine又与大家见面了！继续上期的推视频和推Feed，同样，本期OrZine也接着向大家推荐视频和Feed。Go！

[推视频]鲜果老大说RSS成为大众应用仍需漫长摸索

精彩观点

RSS发展4年里面，大部分都是技术发烧友和IT互联网行业从业者，做传统媒体和比较敏锐的那部分人也开始使用RSS，这正好是传播的过程，前途是光明的，但是现在来讲的话是比较吃苦、难熬的过程。

2008年对RSS行业很关键，经济形势不乐观，看你如何撑下去，如果国内做RSS的这些公司不撑下去很可惜，如果撑下去的话，慢慢发展，将成为大众化的应用。

天健还拥有企业外包、资询服务等业务，有资金能够把鲜果延续下去，做鲜果更多的是理想，回报什么的可能看得稍微少一点，现在鲜果没有做任何盈利的尝试，现在主要还是想把产品做好。

开放API接口在国内刚刚开始做，中间会有利益观念和安全的问题，因为开放的话，一定会带来很多挑战，这个还是得慢慢来，我们已经把最难的部分先做了，后面应当会有更多合作。

对于鲜果，我本身还是有较多期望，我不期望卖给大公司，我期望能够尽力把这创新和产品细节做好，出售很多时候对于创新也会有影响。

创业的人都是比较有才华的，往往会陷入一个误区，比较自我。要把心态放开，心态要平和一些，这样和别人合作的时候，才能够得到一个比较好的结果。

更多观点，看看聊天实录吧。

这一段视频对我的启发很大，我非常喜欢RSS，我相信RSS技术总有一天会成为主流的！

[推Feed]

Feed名称：CSS Web Design 我爱CSS

Feed地址：http://www.52css.com/feed.asp

Blog地址：http://www.52css.com/

Feed预览：

Feed介绍：某次对CSS兴趣大发时发现了这个站点，非常实用！我也从里面学习到不少的CSS技巧，下载到不少的CSS模板。里面的资源足以让你对CSS的了解更上一层楼！强烈推荐订阅！

PS：貌似本期OrZine有点儿太“技术”了，欢迎向OrZine推荐好看好玩好用的视频、Feed……！

WordPress技巧：在SEO面前砍掉多余内容

NetPuter — Sun, 05 Oct 2008 15:24:02 +0000

感觉又是一篇标题党入党申请书的范文，呵呵~

直接进入正题，童鞋（好像你们不喜欢看到童鞋这个词，如果是的话我可以改口）喜欢在侧边栏显示最新文章、最新评论、饭否最新动态以及其他的信息，但是如果显示的内容太多又会导致页面不美观，直接砍掉多余的内容吧，可能会不好看，再者影响SEO。有没有……有，当然有。今天NetPuter就给大家介绍下如何在SEO面前砍掉多余内容。（感觉今天的这个情景预设的不好T^T）

先让我看看效果吧

这个是没有砍掉前的效果，多余的内容很多。

我砍！页面整齐了吧，一行就是一行，你敢跨？我就砍！

如何在SEO面前砍掉多余内容

CSS，又是CSS。代码如下：