技术类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 > 能自動換行》。