用滚动条显示超长代码行
八月 13th, 2008 by
Soloman | 
| 786 views
| 786 views 在Wordpress中，我们经常需要写一些程序代码，这就要用到<code>标签，如果是一大段代码，则需要使用<pre>标签。但这样有个问题，一般来说，由于窄的文字版面比较适合读者阅读，所以，很多主题的正文都比较窄，而当代码行很长的时候，由于使用了<pre>标签，所以那些超出长度的文字既不会折返回来，也不会显示出来，虽然保证了版式的优美，却失去了文章的内容，这是得不偿失的。
当然，很多人安装了各种语法高亮的插件，这些插件一般都能够提供一个滚动条，当长度超出文章宽度时，滚动条就出现，这样既保证了版式，也保证了内容。但一来，我比较喜欢简洁的风格，那些语法高亮的花花绿绿我不是很喜欢，我使用的是一个叫做code markup的插件，这个插件并不根据语法进行高亮，而是可以定制某部分显示什么颜色，更利于文章内容的表达；二来很多需要<pre>的内容不一定是某种编程语言，比如命令行的输入输出等。
通过搜索，我发现了这篇文章，通过简单地修改style.css就能够达到用滚动条来显示超长代码行的功能。其实际效果可以参见这个帖子，下面简单说说这个步骤。
首先，找到你目前主题所使用的style.css，搜索里面是否有pre的定义，如果没有，就自己添加，大致内容如下：
pre {
width: 100%;
overflow: auto;
border: 1px dotted #281;
background-color: #eee;
padding-left: 6px;
padding-bottom: 20px;
}其中定义了一个虚线的边框，并设置背景为灰色，左边的padding设置为6，否则左边显得比较拥挤，最关键的是overflow设置成auto，这个设置提供了自动显示滚动条的功能。另外特别需要注意的是padding-bottom，这个必须设在20左右，其实是为滚动条留了空间。当滚动条隐藏时，这部分留白似乎显得比较多余，但如果不设，当滚动条出现时，滚动条就会遮盖部分文字，非常不舒服。
八月 24th, 2008 at 09:37
不错吖~利用CSS!
顶!