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