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

让 pre 标签自动换行

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

嗯，如果不是在代码中换行，代码就会整一行的显示出来。根据源码我们可以发现在 pre 标签中显示代码的名为 Code 的 Class ，因此我们就能针对其进行修改啦！请出超强大的 CSS ！

.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

因此，现在就只有实现无行号自动换行、有行号不换行咯，瞎蒙了下居然可以实现了（不知道为啥）：

.code pre {
  word-wrap:break-word;
  word-break:break-all;
}

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

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